How to Use handleLogin with @auth0/nextjs-auth0 in Next.js

Get Help
,
1

Hello.
I am currently developing an application with the following architecture:

  • Frontend
    • Next.js: 13.4.8
    • @auth0/nextjs-auth0: ^3.1.0
  • Backend
    • Go: 1.20
    • Echo: v4.10.2

I am trying to implement the following authentication flow, but I am encountering issues:

  1. Click the login button on the frontend.
  2. Redirect to Auth0’s authentication page.
  3. After successful authentication in Auth0, redirect back to /api/auth/callback on the frontend.
  4. Use the query parameter code to obtain an ID token using the /oauth/token request—this is where I’m failing.

When I try using curl, I get an error:

curl --request POST \
     --url 'https://DOMAIN/oauth/token' \
     --header 'content-type: application/x-www-form-urlencoded' \
     --data 'code=code&grant_type=authorization_code&client_id=id&client_secret=secret&redirect_uri=http://localhost:3500/api/auth/callback'
{"error":"invalid_grant","error_description":"Invalid authorization code"}

For troubleshooting, when I manually go to the following URL in a browser and use the obtained code, I can successfully get an ID token:

https://DOMAIN/authorize?audience=http://localhost:8080&scope=openid profile email&response_type=code&client_id=id&redirect_uri=http://localhost:3500/api/auth/callback

I’m using a plugin in Next.js to handle this:

import { getAuthUserId } from '@/util/auth';
import { handleAuth, handleCallback, handleLogin } from '@auth0/nextjs-auth0';
import { NextRequest } from 'next/server';

// export default handleAuth();

export default handleAuth({
  callback: async (request: any, response: any) => {
    try {
      console.log('Callback :: ', response);
      await handleCallback(request, response, { redirectUri: 'http://localhost:3500/mypage' });
    } catch (error) {
      console.log('Callback error :: ', error);
      response.redirect("/auth/error");
    }
  },
  login: async (request: any, response: any) => {
    console.log('Logging in');
    // Pass custom parameters to login
    try {
      await handleLogin(request, response, {
        authorizationParams: {
          audience: 'http://localhost:8080',
          scope: 'openid profile email',
          response_type: 'code',
          redirect_uri: 'http://localhost:3500/api/auth/callback',
          connection_scope: 'openid profile email',
        },
        returnTo: '/mypage',
      });
      console.log('Successfully logged in');
    } catch (error) {
      console.log('Error logging in:', error);
    }
  },
});

What I want to achieve is to generate an authenticable code using handleLogin and obtain an ID token. The curl testing is for technical verification; in production, I plan to implement this in Go.

Your assistance is greatly appreciated.

3

Hi @Hiroshi0900

Welcome to the Auth0 Community!

I am sorry about the late reply to your inquiry!

I would recommend to review this community post regarding retrieving the access token and check out our Github documentation for NextJS in order to read more about the handleLogin() function since you might not be passing the correct scopes/audience to your CURL call.

If you have any other questions, feel free to let me know or post again on the community!

Kind Regards,
Nik

4

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