I'm having trouble figuring out how to request in backend for a credentials provider login.
I created 2 Credential Provider with different ids(credentials and token)
I attempted the following(per https://next-auth.js.org/getting-started/rest-api#post-apiauthsigninprovider)
POST /api/auth/signin/credentials
POST /api/auth/signin/token
But it seems to return 404 Not Found
I also tried utilizing the route used by the default login form
POST /api/auth/callback/credentials
POST /api/auth/callback/token
But also a 404(also included a csrfToken)
Here is a code snippet
import { HOME_PAGE, LOGIN_PAGE } from '#app/constants/routes';
import { backendApi } from '#app/lib/api';
import { getCsrfToken, signIn } from 'next-auth/react';
export default async function handler(req, res) {
try {
const { accessToken} = req.query;
const csrfToken = await getCsrfToken();
await backendApi.post('/auth/signin/token', {
csrfToken,
accessToken,
});
res.redirect(307, HOME_PAGE);
} catch (error) {
res.redirect(307, LOGIN_PAGE);
}
}
Related
I'm trying to implement Server Side Authentication with Supabase and Sveltekit. I followed the Quickstart Guide and was able to do authentication client-side. (preventDefault on the submit event and do client-side POST request).
But when trying to do the same thing Server-Side , the auth cookie with the token is not created. Here's the logic:
// src/routes/login/+page.server.ts
import type { PostgrestResponse } from '#supabase/supabase-js';
import { supabaseClient } from '$lib/supabaseClient';
import type { Database } from '$lib/types/database.types';
import type { PageLoad } from './$types';
import type { PageServerLoad, Actions } from './$types';
import { redirect } from '#sveltejs/kit';
export const actions: Actions = {
'login-with-password': async ({ request }) => {
const formData = await request.formData();
const email = formData.get('email');
const password = formData.get('password');
console.log(email, password);
const { data, error } = await supabaseClient.auth.signInWithPassword({ email, password });
console.log(data);
if (error) {
return {
status: 500,
body: {
error: error.message
}
};
}
throw redirect(302, '/');
return { success: true };
}
};
data seems to hold the correct response, with token and everything, but that's not persisted as a cookie.
https://stackblitz.com/~/github.com/gkatsanos/client
The example in the NextJS repository uses cookie storage and iron-session in order to maintain auth during a user's logged in session. The example code is at this URL:
https://github.com/vercel/next.js/tree/canary/examples/with-passport
Unfortunately, it forces the user to first signup for a new account, then login with those credentials instead of automatically logging the user in when a successful signup is made.
It uses the NextJS API Routes, and the Passport Local strategy for authentication. I'm pasting the code below for both the sign up and the login routes.
I found some other SO posts that talked about how to use the authenticate method in login inside the signup method, but I believe that requires middleware that I don't understand. I can't just paste in the code from login into signup.
My question is, I want to have signup automatically create the cookie and then redirect to some other page in a logged in state.
/pages/api/signup.js
import { createUser } from '../../lib/user'
export default async function signup(req, res) {
try {
await createUser(req.body)
res.status(200).send({ done: true })
// WANTING TO ADD SOME CODE POSSIBLY HERE TO AUTO LOGIN
} catch (error) {
console.error(error)
res.status(500).end(error.message)
}
}
/pages/api/login.js
import passport from 'passport'
import nextConnect from 'next-connect'
import { localStrategy } from '../../lib/password-local'
import { setLoginSession } from '../../lib/auth'
const authenticate = (method, req, res) =>
new Promise((resolve, reject) => {
passport.authenticate(method, { session: false }, (error, token) => {
if (error) {
reject(error)
} else {
resolve(token)
}
})(req, res)
})
passport.use(localStrategy)
export default nextConnect()
.use(passport.initialize())
.post(async (req, res) => {
try {
const user = await authenticate("local", req, res);
// session is the payload to save in the token, it may contain basic info about the user
const session = { ...user };
await setLoginSession(res, session);
res.status(200).send({ done: true });
} catch (error) {
console.error(error);
res.status(401).send(error.message);
}
});
I'm using Next.js for my app, and currently have an API route that sets a JWT as a cookie. Throughout the app, I'm using Axios to fetch all of my data from external APIs, and after a user logs in I need to set that cookie as a default request header on every API call to make sure that a user has been authenticated. The basic flow is like this:
The login form sends a post request to my API route at /api/auth/login, passing the username and password and returning the JWT, and setting it as a cookie. Once the idToken cookie has been set I need to add that as an authentication header to every API request within my Axios instance, seen as adapter here. How can I go about getting this done?
My handle login function:
const handleLogin = async (values: ValuesProps) => {
const response = await axios.post('/api/auth/login', values);
if (response.status !== 200) {
throw new Error(response.statusText);
}
};
Which speaks to api/auth/login:
import { NextApiRequest, NextApiResponse } from 'next';
import { setCookie, parseCookies } from 'nookies';
import { adapter } from 'utils/api/config';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
if (req.method !== 'POST') {
res.status(500).json('Only POST requests allowed at this route.');
} else {
const { data } = await adapter.post(AUTH.login, JSON.stringify(req.body));
const cookies = parseCookies();
setCookie({ res }, 'idToken', data.token, {
maxAge: 30 * 24 * 60 * 60,
path: '/',
});
api.defaults.headers.Authorization = `Bearer ${cookies['idToken']}`
res.status(200).json(data);
}
};
export default handler;
As you see here I tried adding adapter.defaults.headers.Authorization as a global default, but I'm not seeing it in my request headers. What's the best way to go about setting this globally?
You could use axios.create. It is a factory that creates new instances of axios. So you write a function
import axios from "axios";
export const axiosInstance = async () =>{
// you need to be careful in next.js for adding cookies.
// You could be on the server or on client. this code will work for client assuming that you will be using on client side
// I belive you are using `parser` to get cookies. get the token
const yourToken="whatever"
const axiosClient = axios.create({
baseURL: 'baseUrlHere',
timeout: 1000,
headers: {
'Accept': 'application/vnd.GitHub.v3+json',
// this is how u set in your code
'Authorization': `Bearer ${cookies['idToken']}`
}
});
return axiosClient
}
Then import this in anywhere you want to use:
const {data}=await axiosInstance().post("/auth")
Technically this should work
You can set default header to all axios request by command:
const token = getCookie('token')
axios.defaults.headers.common["idToken"] = token
I have an issue sending a JWT token to the server and using it to authorize access in load handlers. I am using Firebase on the client for authentication. When logged in (onAuthStateChanged), I send a POST request with the token to the /api/login endpoint:
export async function post(req) {
const idToken = req.headers['authorization']
try {
const token = await firebase().auth().verifyIdToken(idToken)
req.locals.user = token.uid
} catch (e) {
console.log(e)
return {
status: 500,
body: 'forbidden',
}
}
return {
status: 200,
body: 'ok',
}
}
In hooks.js:
export function getSession(request) {
return {
user: request.locals.user
}
}
export async function handle({ request, resolve }) {
const cookies = cookie.parse(request.headers.cookie || '')
request.locals.user = cookies.user
const response = await resolve(request)
response.headers['set-cookie'] = `user=${request.locals.user || ''}; Path=/; HttpOnly`
return response
}
In load methods:
export async function load({ session }) {
if (!session.user) {
return {
status: 302,
redirect: '/start'
}
}
// ...
}
All of this works fine except that any client-side navigation after a login is rejected because session.user is still undefined. When navigating by typing the URL in the browser, it works correctly and after that the client-side navigation also works.
Any ideas why and what to do?
I have solved this by adding a browser reload on whichever page the user lands on after logging in. The snippet for the reload on the client side handling on a successful response from the login API endpoint looks like this
if (sessionLoginResponse?.status === "success") {
await signOut(auth);
window.history.back();
setTimeout(() => {
window.location.reload();
}, 10);
}
I am using axios interceptor in my react app to pass the token for each request.
I initially call the setupAxiosInterceptors method after I login (See code below). This works perfectly fine until I refresh the browser.
const registerSucessfulLoginForJwt = (username, token) => {
sessionStorage.setItem(USER_NAME_SESSION_ATTRIBUTE_NAME, username)
setupAxiosInterceptors(createJwtAuth(token)) //Calling the axios interceptor at the time of login
}
See below the setupAxiosInterceptors method
const setupAxiosInterceptors = (token) => {
Axios.interceptors.request.use((config) => {
if(isUserLoggedIn()) {
config.headers.authorization = token
sessionStorage.setItem('authorization', token)
}
return config
})
}
Any thought on how to fix this so it works at all time?
I was able to find a solution to my problem. I create an ApiSetup.js file where I create a custom axios instance which could use for all requests.
const request = axios.create({
baseURL: API_PATH_BASE
})
request.interceptors.request.use(config => {
const currentUser = AuthenticationService.getLoggedInUser() //You can get the user directly from the cookie or session storage...
if(currentUser.userName) {
config.headers.Authorization = currentUser.userToken
}
return config
}, err => {
console.log(err)
return Promise.reject(err)
})
export default request