Share JWT secret key to be used in Next Auth functionality and custom Django API

[angelhodar]

What are you trying to do
I want to create a platform that would consist in basically a dashboard with NextJS and a custom backend in Python as it is related to machine learning and I prefer to use Python with Django REST Framework for this. It also has a landing page and a sign in page to access that dashboard. Because of this, I was wondering if it could be possible to handle the auth functionality with Next-Auth and use the JWT option to be able to send the returned token to my Djando API and validate it there with the same secrent env var as the one used in Next Auth with the Vercel env vars.

Feedback
I found this blog post which seems to solve this issue but it seems that my Django API would have to create another access token, and my question is that it should be possible to use the same JWT in both API and Next-Auth if I share the same secret right?

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[jlarmstrongiv]

I am also curious about this—@angelhodar did you end up trying it to see if it works? 😄

[angelhodar]

Yes! The only thing you need to do is creating another token inside the JWT provided by NextAuth:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import jwt from 'jsonwebtoken';

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    Providers.GitLab({
      clientId: process.env.GITLAB_CLIENT_ID,
      clientSecret: process.env.GITLAB_CLIENT_SECRET,
    }),
    Providers.Atlassian({
      clientId: process.env.ATLASSIAN_CLIENT_ID,
      clientSecret: process.env.ATLASSIAN_CLIENT_SECRET,
      scope: 'write:jira-work read:jira-work read:jira-user offline_access read:me',
    }),
  ],
  database: process.env.DATABASE_URL,
  secret: process.env.JWT_SECRET,
  debug: process.env.NODE_ENV === 'development',
  session: {
    jwt: true,
  },
  callbacks: {
    async session(session, token) {
      // This attachs the token to the object returned by useSession
      if (token?.backendToken) session.backendToken = token.backendToken;
      return session;
    },
    async jwt(token, user, account, profile, isNewUser) {
      const { sub, name, email } = token;
      const backendToken = jwt.sign(
        { sub, name, email },
        process.env.JWT_SECRET,
      );
      token.backendToken = backendToken;
      return token;
    },
  },
  pages: {
    signIn: '/login',
  },
});

And in the front you access the backendToken property of the session object:

const DashboardLayout = ({ children }) => {
  const router = useRouter();
  const [session, loading] = useSession();

  if (loading) return null;

  /* use the session.backendToken here*/

  return (
    <HStack height="100vh">
      <Box height="100vh" bgColor="gray.900">
        <SideNavigation />
      </Box>
      {children}
    </HStack>
  );
};