Integrating Google One-Tap login with Auth0 nextjs / 4.9.0

Get Help
,
1

Hello, what is approach to integrate with Google’s One-Tap at “@auth0/nextjs-auth0”: “^4.9.0” ?

Cant figure out what i’m missing

After response from google one tap i trigger:
/auth/login?connection=google-oauth2&login_hint=${encodeURIComponent(<email from response>)},
this triggers
authResponse = await auth0.middleware(request);

at logs i see that params are passed further: …&connection=google-oauth2&login_hint=…

but i still land at universal login page and need to click “Continue with google” / or use credentials.

Credential and Continue with google flows works fine.

3

Hi @vadim,

Welcome to the Auth0 Community!

It appears that you’re attempting to manually integrate the Google One-Tap client-side flow and then pass the result to the @auth0/nextjs-auth0 SDK’s login endpoint. The recommended and much more straightforward approach is to enable Google One-Tap directly within your Auth0 Google Connection settings. This allows Auth0’s Universal Login page to handle the One-Tap prompt for you automatically, without you needing to manage it on your client.

The good news is that the solution is much simpler than the path you’re on. You can let Auth0 manage the entire One-Tap experience.

  1. Remove your custom client-side Google One-Tap code. Since Auth0 will be handling this, your implementation is no longer necessary and may cause conflicts.
  2. Navigate to your Auth0 Dashboard.
  3. Go to Authentication and then select Social.
  4. Make sure the Google social connection is set up and enabled for your application

That’s it! Now, when your Next.js application redirects a user to log in via /api/auth/login, the Auth0 Universal Login page will automatically detect if the user has a valid Google session and present the One-Tap UI. Your application code doesn’t need to change at all.

If you have any further questions, please don’t hesitate to reach out.

Have a good one,
Vlad

4

Thank you for information, i’ll try it out.

But we want to show one tap at “Home page” like quick login, your approach requires navigation to Universal login.

Social (google) is configured, this part is done and tested

5

If you use the /authorize Endpoint and provide the connection ID, the user should be sent directly to the Google Login screen.

Give it a try and give us any updates.

Have a good one,
Vlad

6

Hello, thank you for information.

Right now i face such error: “server_error: Unable to issue redirect for OAuth 2.0 transaction”

(TRACKING ID: 4421c5beb12245114afe)

If i have 2 accounts in session, and generate auth url without login_hint then i’m redirected to google account selection. If i have 1 account or provide login_hint then it automatically proceeds to next step . But then fails with error.

what should be redirect url?

i have tried one from google console, localhost etc..

localhost:3000/auth/callback
localhost:3000/api/auth/callback
....auth0.com/login/callback

Full ur:

${oauthDomain}/authorize?response_type=token&scope=${encodeURIComponent("openid profile email")}&client_id=${oauthclietnId}&redirect_url=${encodeURIComponent(redirecUrl)}&returnTo=${encodeURIComponent(returnUrl)}&connection=google-oauth2&login_hint=${encodeURIComponent(loginHint)}
7

Hi @vadim,

The error Unable to issue redirect for OAuth 2.0 transaction typically happens when the redirect_uri you’re sending in your request doesn’t match a URL listed in your Allowed Callback URLs in the Auth0 dashboard.

However, the bigger issue is that with the @auth0/nextjs-auth0 SDK, you shouldn’t be building this /authorize URL by hand. The SDK provides a login handler specifically designed to do this securely for you.

There are a few key issues with the manual URL you’re building:

  1. You’re using response_type=token. This specifies the “Implicit Flow,” which is not recommended for web apps. The @auth0/nextjs-auth0 SDK is built for the “Authorization Code Flow,” which uses response_type=code.
  2. The correct OAuth 2.0 parameter name is redirect_uri, not redirect_url.
  3. The core problem is that you’re bypassing the SDK’s built-in session handling. The SDK’s login handler (/api/auth/login) is designed to construct the correct URL, set a secure state cookie, and handle the response at /api/auth/callback.

The reason it fails after you select an account (or when login_hint is used) is that Google successfully authenticates you and tries to send you back to the redirect_uri you provided. Auth0 intercepts this, sees that the provided redirect_uri is not on its allow-list, and returns the server_error.

Instead of building the URL yourself, direct your users to the SDK’s login endpoint and pass your desired parameters to it. This is the correct, secure, and idiomatic way to use @auth0/nextjs-auth0.

export const auth0 = new Auth0Client({
  authorizationParameters: {
    ...
    connection: 'google-oauth2',
    ...
  }
});

By using the SDK’s /api/auth/login handler, you let it take care of the response_type, client_id, scope, state, and redirect_uri, ensuring they are all correct. By passing connection: 'google-oauth2', you tell Auth0 to bypass the Universal Login page and go straight to Google.

Have a good one,
Vlad

8

Hi @vlad.murarasu , yeah i had a bit wrong setup, here is summary of working approach (at least on localhost)

/authorize - can not be used alongisde with auth.middleware - because state param wont match, and other parts probably too.

For One tap
Client side: we load google script, select account and then trigger /auth/login?connection=google-oauth2&login_hint=${encodeURIComponent(email)}

Server side, middlware.ts →
1: Depending on project approach we check if request.nextUrl.searchParams.has(“returnTo”) present and continue or compose returnTo url and redirect back to /auth/login?..&returnTo=someurl
2: return auth0.middleware(request);

3: auth-client.js has registered “login” path handler , it populates all internal params and we can populate additional params
Object.fromEntries(req.nextUrl.searchParams.entries()); from our url (note: not all params can be overwritten (e.g state))

4: this composes and redirects to url that contains our: connection, returnTo, and login_hint populated.

5: Auth0 stuff here triggered

6: Our page is refreshed with logged in user per hint.

P.S i was getting wrong behaviour because of our custom logic on returnTo :frowning:
P.S.S for scopes i did not test if it automatically picks from social login scopes or we need to manually pass:
new Auth0Client({
authorizationParameters: {
scope: “openid profile email”,
},
…
}
we have it for basic flow, and it works for social too.

Thank you for help

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.