Next.js Authentication with Auth0 — The Ultimate Guide

Learn how (and where) to authenticate your user in the different deployment modes that exist for Next.js.

Read on :zap:

Brought to you by @sandrino-a0 :man_technologist:t2:


We’ve had such amazing response to the blog post! If you’re using Auth0 to build Next.js applications with any of the deployment models documented in this post we would love to hear your feedback and comments!

1 Like

Great write-up. I’ve been tooling around with a lot of different methods, mostly the custom server, but would like to get it working serverless as described in this post. Now, while I love Auth0 and use it in pet projects, I have a requirement in a professional project to use a private OpenID Connect provider. After looking the source over a little bit, the @auth0/nextjs-auth0 library looks like it could theoretically be used for any OpenID Connect provider by providing the issuer URL, not requiring Auth0 specifically. Is that the case?

Thanks for this! I’m a bit new to auth0, does nextjs-auth0 only work with universal login? Are there examples for how to implement this using custom login/signup/password reset pages built on NextJS?

Great! I’ve been looking for a solution to run the auth server-side with next and this works well.

It looks like on the serverless example you are missing the callback handler example.

1 Like

Glad you liked it @feverteam!

Thanks so much for the write up and work on nextjs-auth0 SDK, it’s been something really important for us at our company!

My team and I are still currently trying to figure out the best way to handle the following:

  1. Using the serverless model (following the NextJS example), what are your suggestions in handling re-auth / refresh?
  2. What’s the suggested pattern for integrating this with usage of Apollo’s graphql client?

Hey there!

Let me ping article’s author @sandrino-a0 to check and address your hurdles!

1 Like

Did you get an answer this this question? I have the same question. Thanks

Sorry for that guys! Believe me I’ve pinged the repo maintainer multiple times but no response since then

I’m using auth0-nextjs to implement auth on my nextjs app using serverless api routes (no express). I’m securing api routes with requireAuthentication.

In my react-native mobile application, I’m using auth0-react-native to generate access tokens. My question is: can I use these access tokens to call the api routes set up in nextjs?? :pray:thank you!

1 Like

Hey there @goat!

As we had difficulties contacting the repo maintainer I would suggest reaching out to him on Twitter and asking him that. Thanks!

Here’s his Twitter profile:

1 Like

I’ve worked with react, nextjs and worked with custom server on top of nextjs latest /api but i became more confused after reading this article. This is a hard read especially the part explaining serverless function.

Terribly sorry for the inconvenience!

Do you have any specific ideas in mind how can we make it better or is it just the fact that the concept of serverless isn’t explained in a clear way?

1 Like

Great article and project!, implementation of this solution is super fast and took me almost no time.
However, I have a question (more to Auth0 and Vercel alone). is it possible to determine using a deployment on Vercel:
http: //localhost: 3000/api/auth/callback to some dynamic address so that the solution can be tested on randomly generated previews urls?
(e.g., http: //project-name-/**/

Hey there @czechue!

The below advice might be helpful!

1 Like

How can we get the user_metadata and app_metadata back from the user object?

1 Like

Howdy, Nzaleski! Welcome to the Auth0 Community. Thank you for reading the blog post and raising this important question. I’ll like to research an answer for you :slight_smile: Due to current times, it may take a bit longer than usual to complete that research.

On the meantime, please refer to this document that may provide you insight on what endpoints to call to get that information:

Hi Dan - I did figure out one way of retrieving the data by creating a rule to
context.idToken['http://namespace + attribube'] = user.user_metadata.attribute which brings it back to the user object. Also it looks like we can use the Management API to get the metadata as well, but I am still working on that solution.

1 Like

That’s great to hear, Nzaleski! Keep me updated. When I have a cycle, I have it planned to look into this :slight_smile: