NextAuth session callback does not trigger - next.js

I deployed a Nextjs(v13) app with AWS Amplify and using NextAuth(v4.17.0). I'm using CredentialsProvider with a custom server. All works great in development environment, but in production the session callback doesn't fire and the session is empty, even if the token gets created in the database
/page/api/auth/[...nextauth].tsx disregard the console logs lol
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import jwt_decode from "jwt-decode";
import { TokenInfo } from "../../../components/types/auth_types";
async function refreshAccessToken(token) {
try {
console.log("BUT WHY?");
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/token/refresh/`,
{
method: "POST",
body: JSON.stringify({refresh: token.refreshToken}),
headers: {"Content-Type": "application/json"},
}
);
if (!res.ok) throw "refreshError";
const responseJson = await res.json();
return {
...token,
accessToken: responseJson.access,
}
} catch(error) {
return {
...token,
error: "RefreshAccessTokenError",
}
}
}
export const authOptions = {
providers: [
CredentialsProvider({
id: "credentials",
name: "Credentials",
credentials: {
email: { label: "Username", type: "text", placeholder: "" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
const userCredentials = {
email: credentials.email, password: credentials.password
};
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/token/`,
{
method: "POST",
body: JSON.stringify(userCredentials),
headers: {"Content-Type": "application/json"},
credentials: "include",
}
);
console.log("res", res);
if (res.ok) {
const responseJson = await res.json();
console.log("resJson", responseJson);
const tokenInfo: TokenInfo = jwt_decode(responseJson.access);
console.log("tokenInfo", tokenInfo);
return {
id: tokenInfo.user_id.toString(),
email: tokenInfo.email,
firstName: tokenInfo.first_name,
lastName: tokenInfo.last_name,
isStaff: tokenInfo.is_staff,
accessToken: responseJson.access,
refreshToken: responseJson.refresh,
};
}
return null;
} catch(e) {
return null;
}
}
})
],
callbacks: {
async jwt({ token, account, user }) {
if (account && user) {
console.log("got into token", user);
token.firstName = user.firstName;
token.lastName = user.lastName;
token.refreshToken = user.refreshToken;
token.accessToken = user.accessToken;
}
if (token.accessToken) {
console.log("got in this if instead")
const decodedToken: TokenInfo = jwt_decode(token.accessToken);
if (Date.now() < decodedToken.exp * 1000) {
console.log("got here, returned properly");
return token;
}
}
console.log("got here, not properly, why?");
return await refreshAccessToken(token);
},
async session({ session, token }) {
console.log("getting session");
session.user.firstName = token.firstName;
session.user.lastName = token.lastName;
session.accessToken = token.accessToken;
console.log("sess", session);
return session;
}
},
secret: process.env.NEXT_AUTH_SECRET,
session: {
maxAge: 2 * 24 * 60 * 60, // two days
}
};
export default NextAuth(authOptions);
I have searched as best as I could and couldn't find anything that I didn't do already.
My understanding is I don't need to set session: { strategy: "jwt"} since that's the default.
I have NEXT_AUTH_SECRET="mysecret", NEXT_PUBLIC_API_URL="https://www.backend_domain.com" and NEXTAUTH_URL="https://www.frontend_domain.com" set properly in .env.production and the API calls succeed, as well as the NextAuth calls return 200 status code, no errors in Amplify logs
Edit 1:
If I navigate to /api/auth/signin/credentials and use the default UI for login, the session gets created successfully

Related

Next-Auth who to deal with backend access token

I am using Django and Next.js (Version 13 with the app dir enabled). Now I have two questions:
What is the best practice to deal with the access token I receive after I do the authorize call to the django backend? Is it correct how I put it into the callbacks?
export const authOptions = {
secret: process.env.NEXTAUTH_SECRET,
providers: [
CredentialsProvider({
name: 'Django',
credentials: {
username: { label: "Username", type: "text", placeholder: "mail#domain.com" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
// Do access call
const resToken = await fetch(process.env.AUTH_ENDPOINT, {
method: 'POST',
body: JSON.stringify(credentials),
headers: { "Content-Type": "application/json" }
})
const jwt_token = await resToken.json()
// fetching user data
const resUser = await fetch(`${process.env.BACKEND_URL}/auth/users/me/`, {
method: 'GET',
headers: { "Content-Type": "application/json",
"Authorization": `JWT ${jwt_token.access}` }
})
const user = await resUser.json()
if (resUser.ok && jwt_token.access) {
user.access_token = jwt_token.access
user.refresh_token = jwt_token.refresh
return user
}
// Return null if user data could not be retrieved
return null
}
})
],
session: {
strategy: "jwt",
},
jwt: { encryption: true, },
callbacks: {
async jwt({ token, user }) {
if (user) {
token.access_token = user.access_token
token.refresh_token = user.refresh_token
console.log("if executed")
}
return token
},
async session({ session, token, user }) {
if (!session) {
session.access_token = user.access_token
session.refresh_token = user.refresh_token
session.user = user
}return session;
},
}
}
export default NextAuth(authOptions)
I have the provider wrapped in the provider.js file as shown below. Now I was wondering if I need to passt the session as <SessionProvider session={session}> in the code below? And if yes - could you tell me how?
'use client'
import { SessionProvider } from 'next-auth/react'
export function Providers({ children }) {
return (
<SessionProvider>
{children}
</SessionProvider>
);
}
Thank you!

next auth not passing all user info to the client

I am trying to have a role for the user in the session
This is what I get from session.user on the client :
{ "email": "test value" }
what I want to get :
{
"email": "test value",
"role": "user"
}
For some reason I can access the role on the server side but not on the client
[...nextauth].ts :
//..
const authOptions: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers: [
CredentialsProvider({
type: "credentials",
credentials: {},
async authorize(credentials, req) {
const { email, password } = credentials as {
email: string;
password: string;
};
const saltRounds = 10;
const db = path.join(process.cwd(), "db");
const users = JSON.parse(fs.readFileSync(db + "/users.json", "utf-8"));
type User = {
id: string;
email: string;
name: string;
role: "user" | "admin";
password: string;
};
for (let i = 0; i < users.length; i++) {
const e = users[i] as User;
const emailMatch = e.email === email;
if (emailMatch) {
const passwordMatch = bcrypt.compareSync(password, e.password);
if (passwordMatch) {
console.log("user loggedin", e);
return {
id: e.id,
email: e.email,
name: e.name,
role: e.role,
};
}
}
}
throw new Error("Invalid email or password");
},
}),
],
pages: {
signIn: "/auth/signin",
},
callbacks: {
jwt(params) {
if (params.user?.role) {
params.token.role = params.user.role;
}
console.log("jwt", params);
return params.token;
},
},
};
export default NextAuth(authOptions);
I have tried searching for how to do it and I dont see what's wrong with my code.
Here you are not setting the session you have to use the session callback to update the session from the returned token:
async jwt(params) {
if (params.user?.role) {
params.token.role = params.user.role;
}
if (params.user?.email) {
params.token.email = params.user.email;
}
return params.token;
},
async session({ session, token }) {
session.role = token.role;
session.email = token.email;
return session;
},
For some reason I can access the role on the server side but not on the client
that's the role from the token because you have added the property role to it now you have to add properties to your session

Client_fetch_error session (next-auth v3)

i have big problem with next-auth credential-provider when i build my next.js project i get error [next-auth][error][client_fetch_error]
https://next-auth.js.org/errors#client_fetch_error session FetchError: request to http://localhost:3000/api/auth/session failed, reason: connect ECONNREFUSED 127.0.0.1:3000
**** i want to deploy my project local
that is my code
//env.local
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
SECRET=SYoUMVkWrAVwv+qDJ+E43kmS7uMIJY3R7AS53tLNclk=
MONGODB_URI=mongodb://localhost:27017/healthycrm
//[...nextauth].js
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import User from "../../../models/mongoModels/user";
import connectDB from "../../../middleware/mondodb";
const handler = NextAuth({
providers: [
Providers.Credentials({
async authorize(credentials) {
const user = await User.findOne({
EmpUserName: credentials.userName,
}).exec();
if (!user) {
throw new Error("No user Found");
}
const cheakPassWord = user.EmpPassword === credentials.password;
if (!cheakPassWord) {
throw new Error("password is wrong");
}
return { name: user.EmpName, email: user.id, image: user.imgPath };
},
}),
],
secret: process.env.SECRET,
jwt: {
secret: process.env.SECRET,
encryption: true,
},
session: {
jwt: true,
maxAge: 1 * 24 * 60 * 60,
},
callbacks: {
async jwt({ token, user }) {
if (user) {
token.id = user.id;
}
return token;
},
async session({ session, token }) {
if (token) {
session.id = token.id;
}
return session;
},
session: async (session, user) => {
const data = await User.findById(user.email).exec();
const premissions = data.Premissions
? data.Premissions.map((x) => x.id)
: [];
const Emps = data.Premissions ? data.Emps.map((x) => x.id) : [];
session.user.jobID = data.EmpJobID;
session.user.MID = data._id;
session.user.List = data.EmpLists;
session.user.AreasQ = data.EmpAreasQ;
session.user.AreasG = data.EmpAreasG;
session.user.EmpJobName = data.EmpJobName;
session.user.EmpDepartID = data.EmpDepartID;
session.user.EmpDepartName = data.EmpDepartName;
session.user.EmpQtayID = data.EmpQtayID;
session.user.EmpGomla = data.EmpGomla;
session.user.directMangerId = data.directMangerId;
session.user.directMangerName = data.directMangerName;
session.user.EmpClassesQ = data.EmpClassesQ;
session.user.EmpClassesG = data.EmpClassesG;
session.user.Premissions = premissions;
session.user.Emps = Emps;
return Promise.resolve(session);
},
},
});
export default connectDB(handler);
I found the following solution: Run npm run dev during build

refresh access token with apollo client in Next.js

I'm working with next.js and apollo client to get an access token with a refresh token from the server and I searched the web and find apollo-link-token-refresh that does something like silent refresh, so I follow along with example and was happy that after 2 days I finish my project Authentication but no it didn't work. is there any problem in my code?
const refreshLink = new TokenRefreshLink({
accessTokenField: "token",
isTokenValidOrUndefined: () => {
if (!cookie.get("JWT")) {
return true;
}
if (token && jwt.decode(token)?.exp * 1000 > Date.now()) {
return true;
}
},
fetchAccessToken: async () => {
if (!cookie.get("JWT")) {
return true;
}
const response = await fetch(`${NEXT_PUBLIC_SERVER_API_URL}`, {
method: "POST",
headers: {
authorization: token ? "JWT " + token : "",
"content-type": "application/json",
},
body: JSON.stringify({
query: `
mutation {
refreshToken(refreshToken: "${cookie.get("JWTRefreshToken")}") {
token
payload
refreshToken
refreshExpiresIn
}
}
`,
}),
});
return response.json();
},
handleFetch: (newToken) => {
cookie.remove("JWT", { path: "" });
cookie.set("JWT", newToken, {
expires: data.tokenAuth.payload.exp,
secure: process.env.NODE_ENV !== "production",
path: "",
});
},
handleResponse: (operation, accessTokenField) => (response) => {
if (!response) return { newToken: null };
return { newToken: response.data?.refreshUserToken?.token };
},
handleError: (error) => {
console.error("Cannot refresh access token:", error);
},
});
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: authLink.concat(refreshLink).concat(
new HttpLink({
uri: process.env.NEXT_PUBLIC_SERVER_API_URL,
credentials: "same-origin",
}),
),
cache
})
)

NextAuth Credential provider with apollo client?

Using NextAuth for GraphQL authentication with Apollo client in Next.js encounter the error
Hooks can only be called inside of the body of a function.
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { useMutation, useApolloClient } from '#apollo/client';
import { LOGIN_MUTATION } from '../../../graphql/mutations';
import { getErrorMessage } from '../../../lib';
export default (req, res) =>
NextAuth(req, res, {
providers: [
Providers.Credentials({
name: 'Credentials',
credentials: {
identifier: { label: "Email", type: "text" },
password: { label: "Password", type: "password" }
},
authorize: async (credentials) => {
const client = useApolloClient();
const [errorMsg, setErrorMsg] = useState();
const [login] = useMutation(LOGIN_MUTATION);
try {
await client.resetStore();
const { data: { login: { user, jwt } } } = await login({
variables: {
identifier: credentials.identifier,
password: credentials.password
}
});
if (user) {
return user;
}
} catch (error) {
setErrorMsg(getErrorMessage(error));
}
}
})
],
site: process.env.NEXTAUTH_URL || "http://localhost:3000",
session: {
jwt: true,
maxAge: 1 * 3 * 60 * 60,
updateAge: 24 * 60 * 60,
},
callbacks: {},
pages: {
signIn: '/auth/signin'
},
debug: process.env.NODE_ENV === "development",
secret: process.env.NEXT_PUBLIC_AUTH_SECRET,
jwt: {
secret: process.env.NEXT_PUBLIC_JWT_SECRET,
}
});
I am wondering is there anyway to make this work with apollo?
Thank you for the helps.
As in the comments rightfully pointed out, you can't use hooks in server-side code. You would have to create a new ApolloClient like this:
const client = new ApolloClient()
Then you can do queries like this for example:
const { data } = await client.query({
query: "Your query",
variables: { someVariable: true }
});
Best would be the to move the creation of the client to a separate external file as a function and import it in your server-side code whenever needed. Like done here for example.
Edit:
As #rob-art correctly remarks in the comments, for a [mutation][2], the code should look more like this:
const { data } = await client.mutate({
mutation: "Your query",
variables: { someVariable: true }
});

Resources