My app consists of API (nestjs) and client (nextjs).
I am using getServerSideProps to authenticate the user, and redirect to login site if error occurs:
export const getServerSideProps: GetServerSideProps = async (context) => {
try {
// Check whether the user is logged in
await axios.get(
`${process.env.NEXT_PUBLIC_API}/authentication`,
{
withCredentials: true,
// Cookies are attached to the request with context
headers: context.req ? { cookie: context.req.headers?.cookie || '' } : { cookie: '' },
},
);
return {
props: {},
};
} catch (err) {
return {
redirect: {
destination: '/login',
permanent: false,
},
};
}
};
Server side code for setting cookies:
public getCookieWithJwtToken(userId: number) {
const payload: TokenPayload = { userId };
const token = this.jwtService.sign(payload);
return `Authentication=${token}; HttpOnly; Path=/; Secure; SameSite=None; Max-Age=${this.configService.get(
'JWT_EXPIRATION_TIME',
)}`;
}
Cookies are working fine in development mode. I am able to log in, use the utilities for authenticated users and log out. However, when I deploy the server to vercel, the cookies are not persisting in the Application --> Cookies tab.
Cookies are being shown in cookie response, but they are not being applied into the browser.
Cookie information in production:
Cookies work as intended in development:
I've been struggling with this issue for several hours this far, help would be really appreciated.
Related
I am creating a Shiny app that involves AAD token authentication to connect to Snowflake.
I am using a .js script below that obtains the token:
async function wrapperFunc() {
const msalConfig = {
auth: {
clientId: 'XXXXXXXXX',
authority: 'https://login.microsoftonline.com/XXXXXXXXXXX'
}
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
const silentRequest = {
scopes: ["api://XXXXXX/session:role-any"]
};
const callLogin = async function(silentRequest, msalInstance) {
try {
const loginResponse = await msalInstance.loginPopup(silentRequest);
return loginResponse;
} catch (err) {
console.log(err)
}
}
response = callLogin(silentRequest, msalInstance);
return response;
}
wrapperFunc().then(result => {
Shiny.setInputValue("oauthToken", result['accessToken']);
console.log(result['accessToken']);
});
and then plugging that token into the following db connection:
pii_db_connection <- function(OAuth_token) {
connection <- DBI::dbConnect(
drv = odbc::odbc(),
dsn = "snowflake",
token = OAuth_token,
authenticator = "oauth"
)
return(connection)
}
I am redirected to the browser window to log in, and then once that's done, I get hit with this error message:
AADSTS50011: The redirect URI 'XXXXX' specified in the request does not match the redirect URIs configured for the application 'XXXXX'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal.
I can access the app by changing the URL to a localhost URL. But my question is, can I get it to automatically redirect the browser window to the localhost URL?
I was going through the next-auth documentation but didn't find any mention of connecting to custom configured Redis without the use of Upstash for a persistent session store.
My use case is straightforward. I am using Nginx as a load balancer between multiple nodes for my nextJS application and I would like to persist the session if in case the user logs in and refreshes the page as Nginx switches between nodes.
For e.g My Nginx config
server {
listen 80;
server_name _;
location / {
proxy_pass http://backend;
}
}
upstream backend {
ip_hash;
server <nextjs_app_ip_1>:8000;
server <nextjs_app_ip_2>:8000;
}
As you can see from the example Nginx config, there are multiple upstream server pointers here that require user session persistence.
I am using the credentials provider of next-auth as I have a Django-based auth system already available.
I did see the implementation of the next-auth adapter with Upstash. However, I have my own custom server running with Redis.
I tried connecting to Redis using ioredis which works fine as it is connected. However, I am not sure how can I use Redis here with next-auth to persist session and validate at the same time?
For e.g In express, you have a session store which you can pass your Redis Client with and it should automatically take care of persistence. Is there anything I can do to replicate the same behavior in my case?
For e.g In Express
App.use(session({
store: new RedisStore({ client: redisClient }),
secret: 'secret$%^134',
resave: false,
saveUninitialized: false,
cookie: {
secure: false, // if true only transmit cookie over https
httpOnly: false, // if true prevent client side JS from reading the cookie
maxAge: 1000 * 60 * 10 // session max age in miliseconds
}
}))
My Code:
import CredentialsProvider from "next-auth/providers/credentials";
import {UpstashRedisAdapter} from "#next-auth/upstash-redis-adapter";
import Redis from 'ioredis';
const redis = new Redis(process.env.REDIS_URL); //points to my custom redis docker container
export const authOptions = {
providers: [CredentialsProvider({
name: 'auth',
credentials: {
email: {
label: 'email',
type: 'text',
placeholder: 'jsmith#example.com'
},
password: {
label: 'Password',
type: 'password'
}
},
async authorize(credentials, req) {
const payload = {
email: credentials.email,
password: credentials.password
};
const res = await fetch(`my-auth-system-url`, {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json'
}
});
const user = await res.json();
console.log("user", user);
if (!res.ok) {
throw new Error(user.exception);
}
// If no error and we have user data, return it
if (res.ok && user) {
return user;
}
// Return null if user data could not be retrieved
return null;
}
})],
adapter: UpstashRedisAdapter(redis),
pages: {
signIn: '/login'
},
jwt: {
secret: process.env.SECRET,
encryption: true
},
callbacks: {
jwt: async({token, user}) => {
user && (token.user = user)
return token
},
session: async({session, token}) => {
session.user = token.user
return session
},
async redirect({baseUrl}) {
return `${baseUrl}/`
}
},
session: {
strategy: "jwt",
maxAge: 3000
},
secret: process.env.SECRET,
debug: true
}
export default NextAuth(authOptions)
Thank you so much for the help.
I have my back-end Express.js server that has sign in function. After user sign in, he gets 2 tokens - access token and refresh token. What I want to do, is to make return from server refresh token as httpOnly cookie.
Here is a peace of code of this function:
const { refreshToken, accessToken } = await jwtService.updateTokens({
userId: client.id, username: client.username
}, { transaction })
logger.info(`Client ${client.email} has been successfully signed in!`)
await transaction.commit()
return res
.status(200)
.cookie("refreshToken", JSON.stringify(refreshToken), { httpOnly: true, secure: false })
.json({ accessToken, reopening: reopening ? client.username : null })
Basically, browser just doesn't set this cookie as httpOnly and doesn't set it at all, actually. So, I was trying to ping this endpoint with postman, and it works:
In reponse body I have access token and in httpOnly cookie I have this refresh token.
So, the problem is, why browser doesn't save it? I have found a couple of solutions and all of them were about cors and axios credentials. I use 2 express servers - 1 is for normal back-end and 1 is for front-end.
Here is how "path" from front-end to back-end looks like:
Sign in function that send request to front-end express server:
const api = axios.create({
baseURL: apiUrl,
headers: {
'Content-Type': 'application/json'
}
})
export const signIn = async payload => {
try {
const { data } = await api.post('s-i', payload)
return data
} catch (e) {
return e.response.data
}
}
Front-end express server sends request to actual back-end:
const api = axios.create({
baseURL: process.env.NODE_ENV === "development" ? process.env.PNB_API_DEV : process.env.PNB_API_PROD,
})
const router = Router()
router.post('/s-i', async (req, res) => {
try {
const { data } = await api.post('/sign-in', req.body)
res.json(data)
} catch (e) {
return res.status(e.response.status).json(e.response.data)
}
});
And then that function that was at the very begging.
So - the question is - how to make browser save those httpOnly cookies? If it's really about credentials or cors where should I put those settings?
PS
Back-end port - 3001 and front-end port - 8010.
Do you have any idea why cookie is not set in client? It is sent from backend:
func loginEmail(_ req: Request) throws -> Response
{
let response = Response(status: .ok)
let cookie = HTTPCookies.Value(string: "abcdef")
response.cookies["userId2"] = cookie
return response
}
it is visible in browser in Network tab
set-cookie: userId2=abcdef; Path=/; SameSite=Lax
but not on Application
GET is sent to backend. Backend runs on 8080 port, frontend on 3000.
I use axios in a React / Next.js app for calling endpoint:
const login = () => {
axios
.get(`http://localhost:8080/loginEmail`)
.then((res) => {})
.catch((err) => console.error(err));
};
I am using Vapor as backend, and has the following configurations, maybe they matter:
app.middleware.use(CORSMiddleware(configuration: .init(
allowedOrigin: .originBased,
allowedMethods: [.GET, .POST, .PUT, .OPTIONS, .DELETE, .PATCH],
allowedHeaders: [.accept, .authorization, .contentType, .origin, .xRequestedWith, .userAgent, .accessControlAllowOrigin, .init("crossDomain"), .accessControlAllowCredentials, .xRequestedWith]
)))
app.sessions.configuration.cookieName = "userId2"
// Configures cookie value creation.
app.sessions.configuration.cookieFactory = { sessionID in
print("sessionID.string: \(sessionID.string)")
return .init(string: sessionID.string, isSecure: false)
}
app.middleware.use(app.sessions.middleware)
I have a Vue.js SPA and a Node.js API built with Express.js. I'm using express-session (^1.11.3) to manage sessions and express-sequelize-session (0.4.0) to persist the session on a Postgres DB through Sequelize because I need a session to be able to use passport-azure-ad with oidc strategy.
I was having some issues logging in with Microsoft accounts after some time and came to the conclusion that it is because the session cookie (connect.sid) is never cleared from the browser.
I had some things misconfigured and made some changes but even with all the changes it is still not working.
Session on my Express app is configured in the following way:
import session from 'express-session';
import expressSequelizeSession from 'express-sequelize-session';
const Store = expressSequelizeSession(session.Store);
app.use(session({
cookie: {
path: '/',
httpOnly: true,
secure: env !== 'development', // On environments that have SSL enable this should be set to true.
maxAge: null,
sameSite: false, // Needs to be false otherwise Microsoft auth doesn't work.
},
secret: config.secrets.session,
saveUninitialized: false,
resave: false,
unset: 'destroy',
store: new Store(sqldb.sequelize),
}));
On the FE I'm using Vue.js with Axios and setting withCredentials to true so that the cookie is passed on the HTTP request.
// Base configuration.
import Axios from 'axios';
Axios.defaults.baseURL = config.apiURL;
Axios.defaults.headers.common.Accept = 'application/json';
Vue.$http = Axios;
// When making request.
Vue.$http[action](url, payload, { withCredentials: true }).then(() => // Handle request);
You can see from the image that the cookie is being sent on the logout request.
When logging out I'm hitting this endpoint and destroying the session as is explained on the documentation.
router.post('/logout', (req, res) => {
try {
req.session.destroy(() => {
return responses.responseWithResultAsync(res); // Helper method that logs and returns status code 200.
});
return responses.handleErrorAsync(res); // Helper method that logs and returns status code 500.
} catch (error) {
return responses.handleErrorAsync(res, error); // Helper method that logs and returns status code 500.
}
});
The interesting thing is that the session on the DB is removed so I know that the cookie is being sent properly on the request with the right session ID but it is not removing it on the browser for some reason. After logging out I still have this:
Does anyone know what I'm doing wrong? I find it odd that the session is being removed on the DB successfully but not on the request.
As #RolandStarke mentioned the express-session library doesn't have the built in functionality to remove the cookie from the browser, so I just did it manually in the following way:
router.post('/logout', (req, res) => {
try {
if (req.session && req.session.cookie) {
res.cookie('connect.sid', null, {
expires: new Date('Thu, 01 Jan 1970 00:00:00 UTC'),
httpOnly: true,
});
req.session.destroy((error) => {
if (error) {
return responses.handleErrorAsync(res, error);
}
return responses.responseWithResultAsync(res);
});
}
return responses.responseWithResultAsync(res);
} catch (error) {
return responses.handleErrorAsync(res, error);
}
});