Errors with Next 13 app directory

Adstokoe19 commented 1 year ago

I'm receiving errors when using the new /app directory in Next 13. I am passing in a client but my IDE is highlighting an issue:

Also, if I use unstable_getServerSession(authOptions) as per the nextAuth docs in the /app directory (server component), I get more errors:

./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

If I remove the SanityAdapter and SanityCredentials, the errors go away. Have you tested your plugin with Next 13 and the new app directory?

Thanks.

Adstokoe19 commented 1 year ago

@Fedeya Do you have an ETA for this fix? Thanks.

fedeya commented 1 year ago

@Fedeya Do you have an ETA for this fix? Thanks.

Hi @Adstokoe19 for the first problem is a type error of a new version of sanity (now is the 3.x.x), probably i need to change the dependency to a peer dependency for take the latest of the project and avoid this for a new future version of sanity client. Right now the way for fix this before the patch in the package is

SanityAdapter(client as any);

Or install the version 2.x.x of the sanity client

but for the second one, i tried to replicate that and i can't. With the patch i try to make a new example with next 13 in the app directory because i don't get that error

Adstokoe19 commented 1 year ago

@Fedeya the type error has now gone, thanks!

For the second issue, I think I've fixed it. The nextAuth docs suggest:

const session = await unstable_getServerSession(authOptions)

This gives the error. However, if you remove the argument and use:

const session = await unstable_getServerSession()

it works as expected.

fedeya commented 1 year ago

@Adstokoe19 oh, i used the unstable_getServerSession without the argument of authOptions now this makes more sense.

I try to take a look adding that argument, thanks!

alec-bfa commented 1 year ago

I'm having the same issue, except if i omit the authOptions argument i do not get the custom values I have assigned to the session.user object. If I comment out the adapter and provider from this package, it works fine.

I believe this may have to do with argon2, as I had the same issue trying to reimplement some of the features into the studio directly. Moving to argon2-wasm fixed the problem in my solution.

Is this still being investigated for a proper solution?

Edit: This is still an issue with the latest 1.4.5 version, but I have a workaround for now - defining the rest of my authOptions in a separate file and importing only that into my page components.

// auth/baseOptions.ts

import { NextAuthOptions } from 'next-auth';

export const baseOptions: NextAuthOptions = {
  providers: [],
  session: {
    strategy: 'jwt',
  },
  theme: {
    colorScheme: 'light',
    brandColor: '#0376bd',
    ...
  },
  callbacks: {
    jwt({ token, user }) {
      if (!user) {
        return token;
      }
      token.role = user.role ?? undefined;
      return token;
    },
    session({ session, user, token }) {
      session.user.role = user?.role ?? token?.role ?? undefined;
      return session;
    },
  },
};

// auth/authOptions.ts

import { NextAuthOptions } from 'next-auth';
import { SanityAdapter, SanityCredentials } from 'next-auth-sanity';
import { baseOptions } from './baseOptions';

export const authOptions: NextAuthOptions = {
  ...baseOptions,
  providers: [
    SanityCredentials(client as any),
  ],
  adapter: SanityAdapter(client as any),
};

Usage

import Manage from './manage';
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth/next';
import { authOptions } from '@lib/auth/authOptions';
import { baseOptions } from '@lib/auth/baseOptions';

export default async function Page() {
  const session = await getServerSession<typeof authOptions>(baseOptions);
  if (!session?.user) {
    redirect('/api/auth/signin');
  }
  return <Manage user={session.user} />;
}

fedeya commented 1 year ago

yes this is an issue with argon2 internally in the package they use the @mapbox/node-pre-gyp i tried to solve it with dynamic imports but if you still have the issue in the last version i need to think again of a way to solve this

@alec-bfa while we find a solution, if you want you can send a pr with that workaround to the docs in the readme, it would be very helpful 🙌🏾

alec-bfa commented 1 year ago

@Fedeya why not move to argon2-browser? This would be a fairly quick fix.

I'm happy to raise a PR, but I currently do not have permission to create a new branch on the repo, or create a PR for my fork. I have the readme update ready.

fedeya commented 1 year ago

@alec-bfa you should be able to create the pr from your fork but i did it here #17, let me know if that is ready for merge

also for argon i'm doing a research for dependencies to change, thats a good option but looks like has a lower perfomance in node, i'm looking at @node-rs/argon2 probably for the weekend i release a new version with the fix

fedeya commented 1 year ago

@alec-bfa @Adstokoe19 i tried with the rust bindings and the wasm solutions and they all broke the webpack on the server components

but i found a better workaround, that is here. this is a sc issue, that's why i made this pr in nextjs repo, with that in the next canary this workaround is no longer needed

alecpirillo commented 1 year ago

Great work @Fedeya, much appreciated.

Adstokoe19 commented 1 year ago

@fedeya Also appreciate this, thanks!

fedeya / next-auth-sanity

Errors with Next 13 app directory #14