How to get IdToken when authenticating in next.js

[simon20]

Hello, everyone.

I am trying to integrate with Auth0 in next.js but encountered one problem.

After logging in Auth0 successfully, I want to get IdToken to send to our backend.

If anybody has idea or experience in it, looking forward to your help.

Thanks,

[tyf]

Hey @simon20 welcome to the community!

@simon20

After logging in Auth0 successfully, I want to get IdToken to send to our backend.

Regardless of tech stack, you never want to use an ID token against a backend - You’ll need to utilize an access token instead. The following blog post does a great job clarifying the difference:

ID Token and Access Token: What Is the Difference?

In terms of next.js, the following examples should help:

auth0/nextjs-auth0/blob/main/EXAMPLES.md#protect-an-api-route

[simon20]

@tyf

you never want to use an ID token against a backend - You’ll need to utilize an access token instead. The following blog post does a great job clarifying the difference:

but from the Auth0 docs, the accessToken doesn’t contain userinfo.

[Patricio879]

Thank you for sharing this information…

[thameera]

Note that if you are using the Auth0 Next.js SDK, you don’t need to specifically get ID or Access token to call the backend. If the user is logged in, the SDK will take care of this by using the session cookie. If you are using the App Router, the user info can be obtained in an API route with this code without having direct access to a token:

const { user } = await getSession();

However, if the backend is not your Next.js app (eg: an externally hosted API), you can get the Access Token as described here: https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#access-an-external-api-from-an-api-route

[simon20]

Hi @thameera, thanks for your help.
When I wanna integrate with my own backend(not Next.js) which token is needed, accessToken or idToken?
then, is there any way to get idToken in my client side?
Thanks again.

[thameera]

No problem. You will need an Access Token to call any external API.

Generally you would not need to access the ID token by itself since it’s used for initial authentication only. When you get the user’s data from getSession(), the info you get is actually what was present in the ID token.

[simon20]

Thanks again for your help.
I managed to get accessToken and used it for authorization in my rust backend.
but it is gotten in client side(using react query).
Is there a way to get it in getServersideProps and pass it as a parameter to component?
To be honest, I tried it but it is only possible after loggin in so it occurs error before logging in.

[thameera]

You should be able to get the Access Token from getServersideProps as shown here: Call external API from inside getServerSideProps and get the access token? · Issue #928 · auth0/nextjs-auth0 · GitHub
The relevant code snippet is:

export async function getServerSideProps(context) {
  const { accessToken } = await getAccessToken(context.req, context.res);
  // do something with access token
}

The token will not be available prior to login, so that scenario will need to be handled within getServersideProps.

[simon20]

Hi, @thameera

I am really happy for your care.

it worked after logging in. but once i click logout button, the session becomes invaild.

[thameera]

No problem, @simon20.

What you are seeing is expected, right? The session will go away once the user logs out and the code should not be able to get the access token afterwards. You should ideally do that with a try/catch and handle the scenario when the user attempts to access the page while not logged in.

[simon20]

@thameera

you are seeing is expected, right? The session will go away once the user logs in and the code should not be able to get the access token afterwards. You should ideally do that with a try/catch and handle the scenario when the user attempts to access the page while not logged

thanks for your help.
I’ve resolved it.
Then, I am struggling against another issue…
I need to implement change password functionality.
I have one button-change password on my frontend.
and once I click it, then need to redirect auth0-change password page.
If you have any idea, I will really appreciate.
Thanks.