NextJS 13: support for server-side components in nextjs-auth0 p2 (app directory is stable now)

[ColemanDunn]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

Seems like this issue can be opened/considered again because as of today app directory is stable: https://vercel.com/home.

Even the link to the beta docs in the last comment before the issue got locked no longer takes you to the beta docs. Try it yourself: https://beta.nextjs.org/docs

That is all. Thanks!

Describe the ideal solution

Re-open/consider this issue: #889

Alternatives and current workarounds

No response

Additional context

No response

[adamjmcgrath]

Thanks for raising this @ColemanDunn

Next.js 13.4 got released 40 mins ago - what took you so long? 😆

We'll prioritise some work to look into this and update this thread when we have any news.

[ColemanDunn]

Thanks for raising this @ColemanDunn

Next.js 13.4 got released 40 mins ago - what took you so long? 😆

We'll prioritise some work to look into this and update this thread when we have any news.

🤣🤣 I happened to get kicked out of the beta docs and redirected to the regular docs as I was looking at them! I remember stumbling across the other issue and seeing your comment only a few hours after you had posted it so I thought I would come back and update. Thanks for the quick response!

[heyjorgedev]

I'm really looking forward for this! 💪

[Olivia-li]

Excited to see this in action :)

[BRGustavoRibeiro]

Excited to see this too. I need to code a new project from the ground up and this is dealbreaker to me. :)

[obouchari]

Just curious what's the time frame for this to be available in at least a beta version?

[machulav]

I just finished my app and got stuck with the final part - auth0 integration with the app directory. So do you have any updates on when this will be ready?

[glennvgastel]

For all of you who, like me, are waiting for official support ; I'm currently using this workaround that fetches the session on NextJS' server side (page.tsx or layout.tsx) renders, as well as in any authenticated API calls ;

import { headers } from 'next/headers'
import { getSession as auth0GetSession } from '@auth0/nextjs-auth0'
import { IncomingMessage, ServerResponse } from 'http'
import { Socket } from 'net'

const reqRes = () => {
  const req = new IncomingMessage(new Socket())
  headers().forEach((v, k) => {
    req.headers[k] = v
  })
  const res = new ServerResponse(req)
  return { req, res }
}

const getSession = () => {
  const { req, res } = reqRes()
  return auth0GetSession(req, res)
}

export default getSession

You can use it like so ;

// In `layout.tsx`, for example
const session = await getSession()
if (!session) {
  return redirect('/login')
}

The requirement for this to work is, of course, the appSession cookie being present. As it's a httpOnly cookie, it should automatically be included with every request.

[noahebrooks]

I've been using workarounds for a couple of months now. I recently used Clerk for a new project and realized they have had support for RSC and App dir for a while now.

[obouchari]

I've been using workarounds for a couple of months now. I recently used Clerk for a new project and realized they have had support for RSC and App dir for a while now.

Same here I like how Clerk not only support edge stuff. But also how they handle the whole Auth flow. But, helas we're restricted by what our team uses.

[focux]

It's sad that Auth0 had to wait until Next.js 13 was stable to start working on adding first-class support to RSC, even though many users have been asking for it for months.

[AzSiAz]

What's done is done stop complaining and polluting this issue...
Yes it's a shame but the app directory was not production ready back then even if marked "stable" (and it should not even be considered production ready right now anyway), even better this workaround has been in the kitchen-sink exemple for a while now

[SkyM]

stop complaining

If this was a purely open source initiative I would be sympathetic to this mindset, however many of us are paying customers of Auth0 and were sold on the platform based on this type of integration. We have a duty to voice our opinions as customers and let our service provider know how critical this is to our businesses. Auth0 needs to apply more resources to getting this issue addressed in an increasingly competitive environment where other providers like Clerk are ready day one.

Communication from the Auth0 team simply in terms of a timeline would be greatly appreciated.

[noahebrooks]

I wasn't trying to cause the hate train, but it is unfortunate as it seems support for one of the most pressing and groundbreaking features of server components was pushed to the back burner. Especially when we see other SDKs which were super quick moving to add support. I remember when the old thread was still open when 13 was just released the excuse was that the API contract was likely to change many times over and that the feature was too unstable to start a branch which is understandable. However, now its reached stability and there hasn't been any communication in terms of an initiative to support App Dir and RSC. Without communication on this topic I'm hard pressed to keep using Auth0 as I would like my company to be able to take advantage of RSC. I would be more than happy to help.

[buckion]

Part of the sales value proposition of Auth0 is the client libraries. If I'm needing to allocate team time to write them, then I'm paying for an inconvenient and slow database. This is making me quite reticent to expand my contract. Are people in this thread aware of good options that support data residency in multiple countries and SSO connections?

It's seeming like Supabase might actually meet most/all of those needs as of very recently, and it has functioning libraries.

[SkyM]

@buckion We have been evaluating Clerk, which while new has a lot of attractive features. The blocker for us is the lack of cross-application user support. I would also be interested in anybody voicing alternatives to Auth0.

[AzSiAz]

Sorry for the misunderstanding but don't get me wrong: you should complain
Especially if you are a paying customer, just not here do it by others, and more appropriate, channels which you certainly have since as you said you are a paying customer, it's the only way they will move forward faster. For all we know no product manager is even watching this GitHub repository and/or no one report back on what happen here. And given the lack of pull request NextJS doesn't even seem to be a priority...

So yes I stand by what I said, stop complaining here, it's just noise for people watching this issue to know when it's done or for people who could be replying to ask something more than just basic support for server-side components
There is a Auth0 community forum here if you want to keep it public

But I do agree that a timeline would be most welcome to know when we can start playing with it or to plan it's implementation on our side, even if it's behind a /beta import for a little while

Good luck with all your project everyone and let's hope we can get it soon officially 😄

[noahebrooks]

@buckion I agree with @SkyM, Clerk has proven to be a notable alternative. I was working on a side project over the weekend and was able to implement auth with the App dir in under 5 minutes using Clerk, I was completely blown away. We use Supabase as a company and their recent SSO connections prove to be promising as an overall backend Auth/DB solution, also direct RLS makes Supabase IMO possibly the best provider for small teams. Note Clerk does have a Supabase plugin to enable RLS on Supabase using Clerk as the Identity Provider. Clerk comes with a number of react components which makes creating login/signup/profile/... crazy simple which is a huge plus, as well as components like a profile switcher and org switcher which is great for applications in which the user can have multiple workspaces/orgs. We used to use Logto-io as a self hosted solution, had a few problems but not terrible either.

[ColemanDunn]

Yes it's a shame but the app directory was not production ready back then even if marked "stable" (and it should not even be considered production ready right now anyway)

Where are you getting this information? App directory was never "marked stable" until next 13.4 (no experimental flag needed in next.config.js). Not only is it production ready but it is recommended by npx create-next-app

[adamjmcgrath]

Hi all 👋 thanks for your patience - just to let you know that this is being actively developed at the moment and we're hoping to get a Beta out shortly, we'll provide you with another update next week.

[catchshyam]

I am sorry but what we really need is a beta release date. I wish I could tell my product manager that I can commit for our product release shortly but he is asking me for a date which is dependent on Auth0's release date. Guys, please understand, this is a paid product not an opensource initiative.

[catchshyam]

In addition to the work around mentioned above to verify the user session on the pages, do anyone know how we can get the access token that I want to forward to my API server? I tried to extend the workaround to get the access token like below but the JWT is malformed

import { headers } from 'next/headers';
import {  getSession,  getAccessToken} from '@auth0/nextjs-auth0';
import { IncomingMessage, ServerResponse } from 'http';
import { Socket } from 'net';

  const req = new IncomingMessage(new Socket());
  headers().forEach((v, k) => {
    req.headers[k] = v;
  });
  const res = new ServerResponse(req);
  const session = await getSession(req, res);
  const { accessToken } = await getAccessToken(req, res);

[noahebrooks]

@catchshyam I found this to be a suitable workaround atm to get the user's access token.

import * as jwt from 'jsonwebtoken';
import jwksClient from 'jwks-rsa';

export async function verifyAccessTokenFromRequest(req: Request) {
  const authHeader = req.headers.get('authorization');
  if (!authHeader) {
    return null;
  }

  const token = authHeader.substring(7);
  const endpoint = process.env.AUTH0_JWKS_ENDPOINT || '';
  const client = jwksClient({
    jwksUri: endpoint,
  });

  const kid = process.env.AUTH0_JWKS_KEY_ID || '';
  const signingKey = await client.getSigningKey(kid);

  try {
    return jwt.verify(token, signingKey.getPublicKey());
  } catch(error) {
    return null;
  }
}

[noahebrooks]

Misread the question that is for getting and verifying the access token server side^

[macrigiuseppe]

@catchshyam once you have the session object you can simply access the token by simply doing session.accessToken

[adamjmcgrath]

Hi all 👋 just to let you know that we're still actively working on this feature - you can check out the branch here https://github.com/auth0/nextjs-auth0/tree/beta (including an example app here https://github.com/auth0/nextjs-auth0/tree/beta/example-app/app)

We're almost feature complete, but we still have a few things to figure out - so can't give a specific date for when we might make it available as a beta. But we hope this will be in the next week or two.

[buckion]

Hey @adamjmcgrath , thankyou for the update!

What are some of the things to be figured out? Can people join in on the effort to help push it over the line?

[noahebrooks]

@adamjmcgrath I second this^

[talboren]

Any news here? 👀

[buckion]

Update: 3.0.0 beta is live on npm!

[adamjmcgrath]

Yep, v3.0.0-beta.0 is available on npm.

For more information on the Beta, visit #1235

Closing in favour of #1235