Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat (platform) : implemented Github auth #517

Closed
wants to merge 1 commit into from
Closed

feat (platform) : implemented Github auth #517

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 50 additions & 2 deletions apps/platform/src/app/auth/page.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the authentication logic is taken care of in the backend itself. You would just need to configure these things:

  • How the button works
  • What happens after the backend redirects to the oauth success page.

I would recommend you to manually run the authentication once.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After clicking the button, the user is redirected to a GitHub auth screen. Then, an API request is made to fetch user data along with a token. I set the email state and redirect the user to the /account-details page, where everything works fine up to this point

image

the response includes this message

image

If you could explain what it means, then maybe I could do something. Otherwise, it's a dead end for me :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll fix cookies give me a moment

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@poswalsameer can you please look into this PR? Auth is not working as expected

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@poswalsameer can you please look into this PR? Auth is not working as expected

Sure.

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'
import { GeistSans } from 'geist/font/sans'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { z } from 'zod'
import { useRouter } from 'next/navigation'
import { useAtom } from 'jotai'
Expand All @@ -15,6 +15,7 @@ import {
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { authEmailAtom } from '@/store'
import type { User } from '@/types'

export default function AuthPage(): React.JSX.Element {
const [email, setEmail] = useAtom(authEmailAtom)
Expand Down Expand Up @@ -51,6 +52,49 @@ export default function AuthPage(): React.JSX.Element {
}
}

const handleGithubLogin = (): void => {
setIsLoading(true)
window.location.href = `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github`
}

const handleGithubRedirect = async () => {
const urlParams = new URLSearchParams(window.location.search)
const code = urlParams.get('code')

if (code) {
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}`,
Copy link
Contributor

@poswalsameer poswalsameer Nov 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on this line, you are hitting {{BASE_URL}}/api/auth/github/callback but in the backend, we have got {{BASE_URL}}/api/auth/github only. Attaching an image for your reference. Do it this way and let us know if you still face any errors.

Screenshot (492)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am hitting this url and it redirects to a page (wherever i want) with a code but to get the user details i have to fetch the data from here
${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/github/callback?code=${code}

this return a JSON object with user details and token. but the main problem is here
image

and this is response im gettin
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's the flow @dev-palwar:

  • On clicking the GitHub button, users should be redirected to <API_BASE_URL>/api/auth/github
  • The API handles all the logic in here and then sends the user to github auth page.
  • The user authenticates themselves on github
  • Github sends back a redirect to the API with authentication success.
  • The backend then sends back a redirect to a <FRONTEND_BASE_URL>/oauth/signin and attaches a data query object to this redirect url that has all the user data.

{
method: 'GET',
credentials: 'include'
}
)

if (!response.ok) {
throw new Error('Network response was not ok')
}

const data = (await response.json()) as User
setEmail(data.email)

if (response.status === 200) {
router.push('/auth/account-details')
}
} catch (error) {
// eslint-disable-next-line no-console -- we need to log the error
console.error(`Failed to fetch user data: ${error}`)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you could add toast messages to handle the error states in a well-mannered way, then that would be really nice.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I planned to do this after implementing the functionalities first, but then I got stuck and someone asked me to send the PR for review. Is it working fine on your end?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I planned to do this after implementing the functionalities first, but then I got stuck and someone asked me to send the PR for review. Is it working fine on your end?

What's the problem you are facing?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After clicking the button, the user is redirected to a GitHub auth screen. Then, an API request is made to fetch user data along with a token. I set the email state and redirect the user to the /account-details page, where everything works fine up to this point

image

the response includes this message

image

If you could explain what it means, then maybe I could do something. Otherwise, it's a dead end for me :)

this is the problem

}
} else {
// eslint-disable-next-line no-console -- we need to log the error
console.error('No authorization code found in the URL')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add toast here too. Go through the Figma file to know the color scheme.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it 👍

}
}

useEffect(() => {
void handleGithubRedirect()
}, [])

return (
<main className="flex h-dvh items-center justify-center justify-items-center px-4">
<div className="flex flex-col gap-6">
Expand All @@ -66,7 +110,11 @@ export default function AuthPage(): React.JSX.Element {
<Button>
<GoogleSVG />
</Button>
<Button>
<Button
onClick={() => {
handleGithubLogin()
}}
>
<GithubSVG />
</Button>
<Button>
Expand Down
Loading