I've been trying to implement Next-Auth with Typescript and an OAuth provider, such as Auth0. After following the docs the problem appeared, and even after watching tons of videos and doing exactly what other people did, the error persists. Here is the code snippet for the api/auth/[...nextauth.tsx]
:
import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";
export default NextAuth({
providers: [
Auth0({
clientId: process.env.AUTH0_ID,
clientSecret: process.env.AUTH0_SECRET,
domain: process.env.AUTH0_DOMAIN,
}),
],
});
The error I'm getting is in both clientId
and clientSecret
, and is described below:
What I don't understand, however, is that when looking at oauth.d.ts
I find that both accept either string
or undefined
:
I'd really appreciate any help on the matter.
If you actually look at the declaration, it is as such:
export type OAuthUserConfig<P>
Alias for:
Omit<Partial<OAuthConfig<P>>, "options" | "type"> & Required<Pick<OAuthConfig<P>, "clientId" | "clientSecret">>
The reason behind this I believe is that without the clientId
and clientSecret
the OAuth will never work properly.
Two possible ways of fixing it:
import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";
export default NextAuth({
providers: [
Auth0({
clientId: process.env.AUTH0_ID as string,
clientSecret: process.env.AUTH0_SECRET as string,
domain: process.env.AUTH0_DOMAIN,
}),
],
});
import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";
const { AUTH0_ID = '', AUTH0_SECRET = '', AUTH0_DOMAIN = '' } = process.env;
// potential console.error here to warn yourself you forgot to set the env values
export default NextAuth({
providers: [
Auth0({
clientId: AUTH0_ID,
clientSecret: AUTH0_SECRET,
domain: AUTH0_DOMAIN,
}),
],
});