Blegh, trying to login with google auth, im gettin...
# support-questions
e
Blegh, trying to login with google auth, im getting a 500 response.. Can't figure out why Anyone has any idea: my server logs:
shop-web:dev: error - Error: Request failed with status code 400
r
hey @EdwinN1337
How have you configure the google.init on the backend? And what redirectURI have you configured on the google dashboard?
e
Hello!
on the backend i configured it like:
Copy code
js
    appInfo,
    recipeList: [
      ThirdPartyEmailPassword.init({
        providers: [
          Google({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
          }),
        ],
the
emailPassword
implementation works already 🙂
Is it because of the callbackURI? It's a nextjs page, so initial SSR?
I'm trying to build custom UI
n
So Google usually throws a 400 if the redirect uri hasnt been ocnfigured correctly
Can you post the response for when you call the
/authorisationurl
endpoint
e
Copy code
js
{
    "status": "OK",
    "url": "https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&access_type=offline&include_granted_scopes=true&response_type=code&client_id=710520535551-0esc730d0evhv0k77d13v3v3sutla97s.apps.googleusercontent.com"
}
ah wait wrong response
moment
Copy code
js
{"status":"OK","url":"https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&access_type=offline&include_granted_scopes=true&response_type=code&client_id=710520535551-0esc730d0evhv0k77d13v3v3sutla97s.apps.googleusercontent.com"}
be right back (30mins!)
n
Ah I think you are using the credentials for Google from the documentation correct? If thats the case, before redirecting to the URL just add a "redirect_uri" query param to the URL with the one you configured on Google
e
I added redirect_uri, using my own credentials
I followed the blog where u implement GitHub
n
Can we get on a call to debug this? Will be easier
e
Yeah ofcourse, I'm back in around 40mins
n
Also can you send the full URL you are redirecting to (including the query params)
Also in your error handler, the response object
data
should have more information about the error (Third party providers usually explain the error or have a specific code here)
e
Do you mean this?
Copy code
js
    const response = await getThirdPartyAuthUrl({ thirdPartyId: 'google' })

    if (response.status === 'OK') {
      const url = new URL(response.url)

      url.searchParams.append('redirect_uri', 'http://localhost:3004/auth/callback/google')

      // await openAppBrowser(url.href)
    }
Im back btw
n
Yep, the value of
url
after appending the redirect uri
I'm available if you want to call
How can I log the response? The api call made to google is from one of the supertokens endpoint?
Copy code
js
  await superTokensNextWrapper(
    async (next) => {
      await middleware()(req, res, next)
    },
    req,
    res,
  )
All I see in the logs is the 400 response
n
In your servers default error handler (you might have to google this for nextjs) the response will have a
data
property
r
Just add a try / catch around
await superTokensNextWrapper(...)
and you will see the err in the catch block
@nkshah2 there is no default error handler for nextjs API
e
copy/pasted
[[...path]]
from docs hehe, let me wrap a try/catch
shop-web:dev: data: { error: 'invalid_grant', error_description: 'Bad Request' }
n
Right, google is cryptic with their errors. I would double check with all the values and settings in your google OAuth app
e
Hmm, seems like it works
Havent changed anything? weird
shop-web:dev:     data: { error: 'invalid_grant', error_description: 'Bad Request' }
this error is probably expired key?
r
I think I got the problme
e
maybe a nice to add, to capture those errors ;)?
r
The authorisationurl get api responds with a url that doesn’t have a redirect uri appended to its query params (that’s added by the frontend SDK)
So if u query that via postman and then navigate to it manually, then login via google, that flow would be broken
But if you use the frontend SDK, it would add the redirect_uri to the url and then exactly the same flow would work
e
had the same error on localhost tho, 500...
cant reproduce because magically it works, only if i refresh browser I can this error
r
Refresh when?
e
so I land on the
/auth/callback/google
page, i havent fixed any router.push yet
if i refresh the page with the url
i get the error
wait i'll show moment
r
Right. So if you refresh the page, it won’t work cause it will try to consume the code again and fail
Cause it’s already consumed once
And these are one time use codes from google
e
Yeah, right... Problem if u dont catch it
so if u dont wrap it with a try/catch (which i didnt, since i just copy/paste docs)
its hard to figure
while writing custom ui 🙂
r
Hmm
I see
e
still the first request should work, but somehow didnt
thanks again! 😄
r
Is the problem solved? I’m confused
n
Sounds like your second run worked?
e
Yeah sorry, problem solved!
Thank you 😄
so postman won't work thats the conclusion
+ keys that already been used
but since i had no try/catch in nextjs handler, i couldnt figure it out
n
Ah well, anyways glad you got it to work
r
Postman can work if you append the redirect_uri to the returned url (for the authorisationurl API)