My updated authentication options are as follows:
import CredentialsProvider from "next-auth/providers/credentials";
import { type AuthOptions } from "next-auth";
export const nextAuthOptions: AuthOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
username: { label: "Username", type: "text", placeholder: "jsmith" },
password: { label: "Password", type: "password" },
},
async authorize(credentials: any, req): Promise<any> {
const user = {
name: credentials.email,
id: Math.random(),
email: credentials.email,
password: credentials.PhoneOtp,
};
if (user) {
return user;
} else {
return null;
}
},
}),
],
callbacks: {
async signIn() {
return true;
},
async jwt({ token, user, trigger, session }: any) {
if (trigger === "update") {
return { ...token, ...session.user };
}
return { ...token, ...user };
} ,
async session({ session, token }: any) {
session.user = token;
return session;
},
},
session: {
maxAge: 60 * 60, // 1 hour in seconds
strategy: "jwt",
},
pages: {
signIn: "/signin", // Custom sign-in screen URL
},
};
This is the middleware file for Next.js:
export { default } from "next-auth/middleware";
export const config = {
matcher: ["/posts", "/home"],
};
In a client component, I perform a sign-in like this:
await signIn("credentials", {
email: userInfo.email,
password: watch("Phone_otp"),
redirect: true,
// accessToken: JSON.stringify(data.response),
callbackUrl: "/home",
})
.then(() => {
dispatch({
type: reducerActions.HIDE_LOADER,
});
router.push("/home");
console.log("then executed >");
// redirect("/home");
})
.catch((err: any) => {
dispatch({
type: reducerActions.HIDE_LOADER,
});
console.log(" signin err > ", err);
});
However, after signing in, the Tailwind CSS does not load even after performing a hard reload. Sometimes, when accessing an unauthorized page and returning, the CSS loads properly. I am unsure why this behavior is occurring in my Next.js app.