'TypeError: Cannot convert undefined or null to object in NextAuth
NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out.So I created it like the document suggest.I created in signin.tsx page this function.
import { getProviders, signIn } from "next-auth/react"
export default function SignIn({ providers }) {
return (
<>
{Object.values(providers).map((provider) => (
<div key={provider.name}>
<button onClick={() => signIn(provider.id)}>
Sign in with {provider.name}
</button>
</div>
))}
</>
)
}
// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
const providers = await getProviders()
return {
props: { providers },
}
}
/*
// If older than Next.js 9.3
SignIn.getInitialProps = async () => {
return {
providers: await getProviders()
}
}
*/
Also I added in [...nextauth].ts pages like that
pages: {
signIn: "/auth/signin", // Displays signin buttons
signOut: "/auth/signout", // Displays form with sign out button
error: "/auth/error", // Error code passed in query string as ?error=
verifyRequest: "/auth/verify-request", // Used for check email page
newUser: null, // If set, new users will be directed here on first sign in
},
But I take error like this.TypeError: Cannot convert undefined or null to object. I also changed NEXTAUTH_URL=http://localhost:3000/api/auth
to
NEXTAUTH_URL=http://localhost:3000
, but it is not fixed
I also added signin function in callbacks
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
const isAllowedToSignIn = true;
if (isAllowedToSignIn) {
return true;
} else {
// Return false to display a default error message
return false;
// Or you can return a URL to redirect to:
// return '/unauthorized'
}
},
this is the route it takes me after clicking on signing button
http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F
Also that is my options object
const options = {
providers: [
EmailProvider({
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM,
}),
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
adapter: PrismaAdapter(prisma),
secret: process.env.SECRET,
session: {
// Use JSON Web Tokens for session instead of database sessions.
// This option can be used with or without a database for users/accounts.
// Note: `strategy` should be set to 'jwt' if no database is used.
strategy: "jwt",
// Seconds - How long until an idle session expires and is no longer valid.
maxAge: 30 * 24 * 60 * 60, // 30 days
// Seconds - Throttle how frequently to write to database to extend a session.
// Use it to limit write operations. Set to 0 to always update the database.
// Note: This option is ignored if using JSON Web Tokens
// updateAge: 24 * 60 * 60, // 24 hours
},
jwt: {
// You can define your own encode/decode functions for signing and encryption
// if you want to override the default behaviour.
// encode: async ({ secret, token, maxAge }) => {},
// decode: async ({ secret, token, maxAge }) => {},
},
// You can define custom pages to override the built-in ones. These will be regular Next.js pages
// so ensure that they are placed outside of the '/api' folder, e.g. signIn: '/auth/mycustom-signin'
// The routes shown here are the default URLs that will be used when a custom
// pages is not specified for that route.
// https://next-auth.js.org/configuration/pages
pages: {
signIn: "/auth/signin", // Displays signin buttons
signOut: "/auth/signout", // Displays form with sign out button
error: "/auth/error", // Error code passed in query string as ?error=
verifyRequest: "/auth/verify-request", // Used for check email page
newUser: null, // If set, new users will be directed here on first sign in
},
// Callbacks are asynchronous functions you can use to control what happens
// when an action is performed.
// https://next-auth.js.org/configuration/callbacks
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
const isAllowedToSignIn = true;
if (isAllowedToSignIn) {
return true;
} else {
// Return false to display a default error message
return false;
// Or you can return a URL to redirect to:
// return '/unauthorized'
}
},
async jwt({ token, account }) {
// Persist the OAuth access_token to the token right after signin
if (account) {
token.accessToken = account.access_token;
}
return token;
},
async session({ session, token, user }) {
// Send properties to the client, like an access_token from a provider.
session.accessToken = token.accessToken;
return session;
},
},
// Events are useful for logging
// https://next-auth.js.org/configuration/events
events: {},
// You can set the theme to 'light', 'dark' or use 'auto' to default to the
// whatever prefers-color-scheme is set to in the browser. Default is 'auto'
theme: {
colorScheme: "dark",
},
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|