Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Announcing the Beta Release of nextjs-auth0 SDK v4 🎉 #1808

Closed
brth31 opened this issue Nov 18, 2024 · 65 comments
Closed

Announcing the Beta Release of nextjs-auth0 SDK v4 🎉 #1808

brth31 opened this issue Nov 18, 2024 · 65 comments

Comments

@brth31
Copy link

brth31 commented Nov 18, 2024

Hello everyone,

We're thrilled to announce the beta release of nextjs-auth0 SDK v4! This new version brings significant improvements, new features, and fixes to enhance your development experience.

⚠️ Important Notice About v3

As we move forward, we will not be updating v3 of the SDK to support Next.js 15. This allows us to focus on v4, which offers a wealth of new features and improvements. This will also enable us to support future releases of Next.js faster and with more confidence. We understand this may pose challenges, and we're here to help.

v3 will continue to receive critical security updates for 6 months after the GA of v4.

📣 Highlights of v4 Beta

  • Middleware-Based Authentication: Improved compatibility and reduced maintenance by moving to middleware-based handlers.
  • Enhanced Security: Switched to encrypted cookies and removed outdated cookie logic.
  • Resolved State Mismatch Issues: Fixed long-standing issues reported by the community.
  • Improved Session Management: Implemented rolling sessions and eliminated cookie chunking.
  • Improved Hooks and Helpers: Introduced useUser(), getAccessToken(), and getSession() for easier data fetching and session handling.
  • Stateful Sessions with Custom Databases: Support for "Bring Your Own Database" (BYODB).
  • Compatibility with Next.js 15, Turbopack, and React 19
  • Simplified architecture, API, and configuration options

✍️ Try It Out and Provide Feedback

We invite you to explore the beta release and share your feedback to help us improve before the general availability release. We are currently targeting a general availability release by the end of December.

Beta Release: v4.0.0-beta.3

⛵ Need Help with Migration?

If you encounter challenges migrating to v4, please don't hesitate to open an issue and our team will assist you. We're committed to making the transition as smooth as possible.

Thank You for Your Support 🙌

We appreciate your understanding as we focus on making v4 the best it can be. Your feedback is invaluable, and we're here to support you every step of the way.

Happy coding! 🚀

— The Auth0 DX SDK Team

@arpit-jn arpit-jn pinned this issue Nov 18, 2024
@curry1337
Copy link

Thank you for the beta release! Do you have any migration documentation or best practices available?

@brth31
Copy link
Author

brth31 commented Nov 18, 2024

@curry1337 we do have a comprehensive documentation that you can refer to- https://github.com/auth0/nextjs-auth0/blob/v4/README.md. Hope this helps!

@johncarmack1984
Copy link

johncarmack1984 commented Nov 18, 2024

@brth31 The documentation is lacking a coherent migration strategy for those using earlier versions; so far advice from the only auth0 engineer in these threads has delivered application-breaking fixes that actually made our application less secure. I would disagree with the use of the word "comprehensive" in your previous comment, and I disagree with a product strategy that ignores what paying customers are telling you about this release's clear unreadiness for use in production environments.

@curry1337
Copy link

@brth31 Thanks, what about the Edge Runtime? Couldn't find anything about it in the Readme.
We now use @auth0/nextjs-auth0/edge in the middleware.

Is import { Auth0Client } from "@auth0/nextjs-auth0/server" replacing the old edge?

@johncarmack1984
Copy link

@curry1337 not representing auth0 or Vercel, but happy to help a fellow engineer: Vercel reverted all edge rendering back to Node.js seven months ago, so the distinction is currently moot from a practical standpoint (although the Edge API remains in the Next.js docs, so Edge rendering may return in time, so it makes sense you would want the auth0 adapter to ensure support for it). Hope this helps you and your team plan for the future!

@curry1337
Copy link

@johncarmack1984 Wow thanks so much for sharing, really appreciated!

@mitchheddles
Copy link

mitchheddles commented Nov 19, 2024

Is there, or will there be, a way to use this without middleware? Middleware only feels like more of a limitation, rather than a "feature".

Update: After some testing, it seems like we're able to use the export const GET = auth0Client.middleware; in a route handler, as long as the routes match, e.g. /src/app/auth/[auth0]/route.ts. It doesn't feel right, but it's good enough for now.

@portal7
Copy link

portal7 commented Nov 19, 2024

I have tried (albeit a bit “commending myself to god”) to implement from 0 in a totally clean project using the initial steps indicated in the “getting started” article of NextJS 15.

I followed the steps they mention in v4 beta, but not only is it not entirely clear, but it didn't work for me.
as you can see in the attached image.

Is there any place where you can give a “practical” example or a test repo, or a sandbox to see how you implement it?
Thanks

image

@MrUprizing
Copy link

Hi @portal7, I have a project that will be deployed to NextJs 15, and the Auth0 SDK is delaying us. We're going to wait for version 1.0 of SDKv4. In the meantime, I created a basic example to see how it works. You can check it out to get an idea.
https://github.com/uprizingFaze/NextJs_15-Auth0_V4

@portal7
Copy link

portal7 commented Nov 19, 2024

Hi @portal7, I have a project that will be deployed to NextJs 15, and the Auth0 SDK is delaying us. We're going to wait for version 1.0 of SDKv4. In the meantime, I created a basic example to see how it works. You can check it out to get an idea. https://github.com/uprizingFaze/NextJs_15-Auth0_V4

Thanks!!! I really appreciate it, I'm going to try it out and then.... we'll see.

@portal7
Copy link

portal7 commented Nov 19, 2024

Well, I downloaded it and tried to run it, but I have not been able to get it to work.

(unfortunately, I don't have enough experience in JS development to be able to go deeper and investigate what would be the problem).
image

@MrUprizing
Copy link

Oh, this is because of npm i, many packages need to specify the version of React 19 to avoid that issue.
Just use npm i --force when using Next.js 15 or any React 19 project (if you use pnpm, Bun, or Yarn, I think this isn't necessary). Here’s a brief explanation

@portal7
Copy link

portal7 commented Nov 20, 2024

@uprizingFaze , thanks for the clarification, I will read the explanation to improve my knoweldge.

After rename and fil the values inside the .env.local values was able to run it with any other console error.

But....
image

Same as my capture with a fresh-started project with the new package installed.

@MrUprizing
Copy link

It is likely due to the Auth0 environment variables or the URLs in the Auth0 dashboard.

Check this

Dashboard of my example:
Captura de pantalla 2024-11-19 a la(s) 7 34 10 p m

@portal7
Copy link

portal7 commented Nov 20, 2024

Well, after configuring the variables again in auth0 with the indicated values (I registered a new app so as not to modify what I had) and it worked.

The strange thing was that when I clicked on logout, I got an error that the value of the logout URL that I had passed was not valid.
image

And this is my configuration on Auth0
image

this was fixed when I added http://localhost:3000 (what the Auth0 error page said) as an enabled value.
Note: I am using beta-3 version, I don't know if this is solved in version 7, but I will try it.

image

Thanks @uprizingFaze
I strongly appreciate your time and the help/guidance you have given me.

@ctcooper
Copy link

ctcooper commented Nov 20, 2024

@portal7 Did you make sure your app in Auth0 is set as a 'Regular Application'?

'Settings -> Application Properties -> Application Type -> Regular Web Application'
Screenshot 2024-11-20 at 9 06 15 AM

@portal7
Copy link

portal7 commented Nov 20, 2024

Hi @ctcooper ,
No, the value selected in Auth0 was Single Page (SPA)

@paradimes
Copy link

Hi @ctcooper , No, the value selected in Auth0 was Single Page (SPA)

for next, you should use Regular Web Application:
Screenshot 2024-11-20 at 3 59 15 PM

@jamiebytebender
Copy link

jamiebytebender commented Nov 21, 2024

Is there any example of the new v4 working with org invitations?
I have a solution similar to this #701 (comment) where I was calling handleLogin previously but on the latest version there is no handleLogin exported.

@willedanielsson
Copy link

@curry1337 we do have a comprehensive documentation that you can refer to- https://github.com/auth0/nextjs-auth0/blob/v4/README.md. Hope this helps!

Hey, any news on a migration guide?
Like
"Rename env variable XX to YY" etcetera so it's easy to migrate and that people can propose updates to?
As someone going from 3 to 4 due to requirement for Nextjs, it would be good with a migration guide and not an installation guide 🙌

@curry1337
Copy link

@brth31 Could you please provide an update on when we can expect the stable release of v4? Our team has decided to wait for the stable release and not rely on the beta version.

@brth31
Copy link
Author

brth31 commented Dec 2, 2024

@curry1337 we are tentatively aiming to go GA later this month. I will share more updates closer to the release date.

@curry1337
Copy link

@brth31 Great! Thank you for replying so quickly.

@neptaco
Copy link

neptaco commented Dec 9, 2024

When I retrieve the AccessToken, the Payload section is missing. Is this issue occurring for anyone else? This happens both when setting up from scratch with beta9 and accessing /auth/access-token, as well as in projects updated from v3.5.0. In both cases, the Payload section is missing.

@mcgaryes
Copy link

mcgaryes commented Dec 9, 2024

@neptaco - I was not seeing the payload until I overwrote the beforeSessionSaved property. I also changed my audience in authorizationParameters to get the accessToken back in a JWT format.

export const auth0 = new Auth0Client({
    async beforeSessionSaved(session) {
        return {
            ...session,
            user: {
                ...session.user,
            },
        }
    },
    authorizationParameters: {
        audience: "https://service.com", // service that I was needing a JWT for 
    },
});

@neptaco
Copy link

neptaco commented Dec 10, 2024

@mcgaryes
Thank you for the information!
I tried it, and in my case, I was able to retrieve the information just by setting the audience.

In v3.5.0, I used the environment variable AUTH0_AUDIENCE for the configuration, but in v4, it seems that this setting is no longer applied via environment variables.

I’m not sure whether this change is intentional in v4 or if it’s a bug where environment variables are not being loaded.

@chris-erickson
Copy link

chris-erickson commented Dec 13, 2024

@mcgaryes Thank you for the information! I tried it, and in my case, I was able to retrieve the information just by setting the audience.

In v3.5.0, I used the environment variable AUTH0_AUDIENCE for the configuration, but in v4, it seems that this setting is no longer applied via environment variables.

I’m not sure whether this change is intentional in v4 or if it’s a bug where environment variables are not being loaded.

Docs seem to indicate this is now configured with manually setting up the client. Would be good for the migration one to indicate this needs to be adjusted if so!

Wondering as well if it's contributing to this error (that we're also seeing, but slightly different, can open a new issue as needed): #1841 (comment)

TypeError: Failed to parse URL from /auth/access-token.

Update: This seems to be not influencing to aforementioned bug. #1843

@jdwitten
Copy link

I also stumbled on the audience issue. Needed to supply it in the auth0 client initialization like @mcgaryes mentioned to get a valid payload in the JWT access token. Would be good to document this in the migration guide if it is intended.

@jonschmidt
Copy link

jonschmidt commented Jan 8, 2025

I haven't looked deeper at this issue yet and will follow up with more details but running into the following error: image

Next.js version: 15.1.0 React version: 19.0.0 @auth0/nextjs-auth0: 4.0.0-beta.11

Update: The Auth0 application must have at least one connection. The actual error was highlighted in the OAuth exchange.

I am getting this error, but I am using an application that in fact has a connection, so this is not the problem I think. Could it be something else? Is it possible that a cookie from v3 is not compatible with a cookie from v4? I am currently logged in with a user that was logged in using v3 while testing the upgrade. It would obviously be very bad if everyone had to logout to accomplish this upgrade.

Edit: It turns out this was because the cookie shares the same name as the Clerk cookie, which is "__session". Deleting that session cookie fixed the problem. However it would be nice to be able to configure the cookie name!

@kylemorena
Copy link

kylemorena commented Jan 10, 2025

Hello, does the latest version support Preview URLs and Branch URLs on Vercel?

The issue is having different domains, causing the redirect URI to mismatch.

@EvanLovely
Copy link

Hello, does the latest version support Preview URLs and Branch URLs on Vercel?

The issue is having different domains, causing the redirect URI to mismatch.

Use a * in the domain to add the Vercel URLs to your Allowed ____ URLs. It'd be something like https://*-my-project.vercel.app. Probably smart to not do https://*.vercel.app as that'd let any Vercel account use your stuff.

@jamiebytebender
Copy link

This is getting ridiculous. When is the final version going to be available? What are we paying for? Hundreds of companies paying for these integrations and we are stuck with half baked release.

@calvinbrewer
Copy link

This is getting ridiculous. When is the final version going to be available? What are we paying for? Hundreds of companies paying for these integrations and we are stuck with half baked release.

@jamiebytebender I ended up evalutating Clerk as an alternative and it's a much better dev experience.

@calumerskine
Copy link

Would it be possible to export types from the library, such as the Auth0ClientOptions? We're wrapping the initialisation and looking to extend the config.

@mcgaryes
Copy link

Any thoughts on pulling the SESSION_COOKIE_NAME in the AbstractSessionStore. I am running into an issue right now where I have two applications on the same tenant that I want to run locally. The problem is that that the azp keeps getting swapped from one client ID to the other, which breaks the jw decrypt functionality.

My original thought was to update my etc/hosts file, but this comes with its own challenges. It wont be an issue when we're on separate domains, but would be a huge DX improvement when developing locally.

There are some other places that pull in environment variables so I think it would be a simple as:

public SESSION_COOKIE_NAME = process.env.SESSION_COOKIE_NAME ?? "__session"

@mattmchugh4
Copy link

Any update on the timeline for the stable release of v4?

@jonschmidt
Copy link

Is there something I need to do to get useUser() to stop pinging /auth/profile when I'm logged out. It seems like every 10 seconds it pings it even though it's unauthorized (I don't know if this is a bug or I'm doing something wrong, I'm literally just calling useUser()):

image

Edit, I think this has to do with the way I log out. In order for logout to work, I enabled RP-Initiated Logout End Session Endpoint Discovery. I notice that this unwanted pinging only starts happening after I first log out via a logout anchor url.

But I still don't know whats being done wrong or how to fix it.

@JordanHoffman I am noticing this too. Did you ever find a workaround for this?

@JordanHoffman
Copy link

Is there something I need to do to get useUser() to stop pinging /auth/profile when I'm logged out. It seems like every 10 seconds it pings it even though it's unauthorized (I don't know if this is a bug or I'm doing something wrong, I'm literally just calling useUser()):
image
Edit, I think this has to do with the way I log out. In order for logout to work, I enabled RP-Initiated Logout End Session Endpoint Discovery. I notice that this unwanted pinging only starts happening after I first log out via a logout anchor url.
But I still don't know whats being done wrong or how to fix it.

@JordanHoffman I am noticing this too. Did you ever find a workaround for this?

Unfortunately no. I'm just working on a personal project so it's not urgent for me, but I'm keeping my fingers crossed that in the final release it will go away. Hopefully some solution can be provided here.

@jonkwheeler
Copy link

I have a feeling someone in the community is going to make their own community-backed library for Auth0 specifically bc their company selected Auth0 and they can't get out of it. The thought has crossed my mind more than thrice.

@jamiebytebender
Copy link

I have a feeling someone in the community is going to make their own community-backed library for Auth0 specifically bc their company selected Auth0 and they can't get out of it. The thought has crossed my mind more than thrice.

It would make sense if Auth0 were free, but we're paying hundreds of dollars for it. We specifically chose Auth0 because it's a paid service and with that comes the expectation of better support. This is something Auth0 should be addressing directly - it's frustrating and disappointing that they're so unresponsive.

@jdwitten
Copy link

jdwitten commented Jan 24, 2025

Is there an updated expected release date for v4? It's been almost a month since the original announced release date has passed and multiple requests for an update. At least an update on what the status is would be appreciated. All of our other 3rd party sdks and libraries have pretty quickly updated to support React 19/ Next 15, but we are blocked on the upgrade due to this release.

@aeoh31
Copy link

aeoh31 commented Jan 26, 2025

@brth31 can we get an update on the release date please?

@brth31
Copy link
Author

brth31 commented Jan 27, 2025

@jdwitten apologies for the delay. Security review and other release readiness tasks are taking us more time than we anticipated. We are unable to rush through these tasks considering this is a major version release with significant changes to the SDK internals.

We're trying out best to release the GA this week. I appreciate your patience here.

@jdwitten
Copy link

Thanks for the update @brth31 👍

@chammond3
Copy link

I would love a vanilla example of v4 working properly. I'm following the steps in the v4 fork and struggling to get an error of Error [TypeError]: Invalid URL from return await auth0.middleware(request) in middleware.

Image

I have a basic nextjs project using the app router that I recently built and trying to prove out auth0. I had v3 working with the exception of the getSession breaking change in next 15. I'm really spinning my wheels converting to v4...

@brth31
Copy link
Author

brth31 commented Jan 30, 2025

🎉 v4 is now GA. Thanks for your patience, everybody!

@brth31 brth31 closed this as completed Jan 30, 2025
@kylemorena
Copy link

Hello, does the latest version support Preview URLs and Branch URLs on Vercel?
The issue is having different domains, causing the redirect URI to mismatch.

Use a * in the domain to add the Vercel URLs to your Allowed ____ URLs. It'd be something like https://*-my-project.vercel.app. Probably smart to not do https://*.vercel.app as that'd let any Vercel account use your stuff.

Hi,
thanks for replying!
the issue I'm facing is managing VERCEL_BRANCH_URL and VERCEL_URL. I'm using VERCEL_URL as the appBaseUrl. Is there an alternative way to handle this? In version 3, I was able to build the redirectUri by retrieving the request host(request.nextUrl.origin) from the API route handler in Next.js.

@jamiebytebender
Copy link

I have similar issue @kylemorena with preview deployments.
I was also using the following in the .env.production NEXT_PUBLIC_AUTH0_BASE_URL=${VERCEL_URL:-$VERCEL_BRANCH_URL} but doesn't seem to work anymore.

@KrustyC
Copy link

KrustyC commented Feb 5, 2025

🎉 v4 is now GA. Thanks for your patience, everybody!
@brth31 Thanks for getting this over the line. I have a question though:

Is there a plan to actually release this on NPM as well? Seems like the latest available version on NPM is not an official one, but it's just a beta?

@isoroka-plana
Copy link

isoroka-plana commented Feb 5, 2025

🎉 v4 is now GA. Thanks for your patience, everybody!
@brth31 Thanks for getting this over the line. I have a question though:

Is there a plan to actually release this on NPM as well? Seems like the latest available version on NPM is not an official one, but it's just a beta?

@KrustyC there's 4.0.0 in the version history so I am pretty sure you can install it.

Image
Question is why is it not among the current tags instead of the beta one?

@chris-erickson
Copy link

It's also still only in the v4 branch instead of main which is incredibly confusing when coming back here to look for v4 docs. Takes some time digging into PR's to really even be sure that's that correct branch.

@curry1337
Copy link

Fellow developers who have migrated: What’s your advice for others? Should we move to v4 now or hold off? We’re planning to upgrade to Next.js 15 but want to avoid debugging Auth0, as our roadmap is already packed.

@chris-erickson
Copy link

Would reccomend. Overall it works much more like you'd expect and no major issues detected here. Glad to have NextJS 15 features.

@curry1337
Copy link

Would reccomend. Overall it works much more like you'd expect and no major issues detected here. Glad to have NextJS 15 features.

Thank you!

@DotCoyote
Copy link

Fellow developers who have migrated: What’s your advice for others? Should we move to v4 now or hold off? We’re planning to upgrade to Next.js 15 but want to avoid debugging Auth0, as our roadmap is already packed.

Overall it works quite good, I just ran into an edgecase: #1884

@perryraskin
Copy link

perryraskin commented Feb 13, 2025

@chammond3 I'm having the same issue as you - Invalid URL happening in the middleware file. I'm on v4.0.1. Is there a solution? I have the correct env variables so I'm not sure what the issue is.

UPDATE: It appears that changing the env var from AUTH0_BASE_URL to APP_BASE_URL did the trick.

@mmeadwell
Copy link

Has anyone implemented a custom session store using redis or a database? Reading through the documentation I see how to setup the custom session store but not any implementation details. Thanks for any help in advance!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests