'Next-Auth : How the registration is handled with a email + password credential provider?
How the registration is handled with a custom credential provider ( email + password)?
Currently my [...nextauth].js looks like this:
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import axios from 'axios'
import jwt from "next-auth/jwt";
const YOUR_API_ENDPOINT = process.env.NEXT_PUBLIC_API_ROOT + 'auth/store'
const providers = [
Providers.Credentials({
name: 'Credentials',
authorize: async (credentials) => {
try {
const user = await axios.post(YOUR_API_ENDPOINT,
{
password: credentials.password,
username: credentials.email
},
{
headers: {
accept: '*/*',
'Content-Type': 'application/json'
}
})
console.log('ACCESS TOKEN ----> ' + JSON.stringify(user.data.access_token, null, 2));
if (user) {
return {status: 'success', data: user.data}
}
} catch (e) {
const errorMessage = e.response.data.message
// Redirecting to the login page with error messsage in the URL
throw new Error(errorMessage + '&email=' + credentials.email)
}
}
})
]
const callbacks = {
/*
|--------------------------------------------------------------------------
| Callback : JWT
|--------------------------------------------------------------------------
*/
async jwt(token, user, account, profile, isNewUser) {
if (user) {
token.accessToken = user.data.access_token
}
return token
},
/*
|--------------------------------------------------------------------------
| Callback : Session
|--------------------------------------------------------------------------
*/
async session(session, token) {
// Store Access Token to Session
session.accessToken = token.accessToken
/*
|--------------------------------------------------------------------------
| Get User Data
|--------------------------------------------------------------------------
*/
const API_URL = 'http://localhost:3000/api';
const config = {
headers: { Authorization: `Bearer ${token.accessToken}` }
};
let userData;
await axios.get(`${API_URL}/user`, config)
.then(response => {
userData = {
id: response.data.id,
uuid: response.data.uuid,
username: response.data.username,
avatar_location: response.data.avatar_location,
gender_id: response.data.gender_id,
date_of_birth: response.data.date_of_birth,
country_id: response.data.country_id,
location: response.data.location,
about_me: response.data.about_me,
interests: response.data.interests,
website: response.data.website,
timezone: response.data.timezone,
full_name: response.data.full_name,
formatted_created_at: response.data.formatted_created_at,
formatted_last_seen: response.data.formatted_last_seen,
album_count: response.data.album_count,
total_unread_message_count: response.data.total_unread_message_count,
};
// Store userData to Session
session.user = userData
}).catch((error) => {
// Error
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
// console.log(error.response.data);
// console.log(error.response.status);
// console.log(error.response.headers);
console.log('error.response: ' + error.request);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the
// browser and an instance of
// http.ClientRequest in node.js
console.log('error.request: ' + error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
return session
}
}
const options = {
providers,
callbacks,
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: `jwt` is automatically set to `true` if no database is specified.
jwt: true,
// 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
},
secret: process.env.SECRET,
jwt: {
// signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
//
// // You can also specify a public key for verification if using public/private key (but private only is fine)
// verificationKey: process.env.JWT_SIGNING_PUBLIC_KEY,
//
// // If you want to use some key format other than HS512 you can specify custom options to use
// // when verifying (note: verificationOptions should include a value for maxTokenAge as well).
// // verificationOptions = {
// // maxTokenAge: `${maxAge}s`, // e.g. `${30 * 24 * 60 * 60}s` = 30 days
// // algorithms: ['HS512']
// // },
secret: process.env.JWT_SECRET,
},
pages: {
error: '/login' // Changing the error redirect page to our custom login page
}
}
export default (req, res) => NextAuth(req, res, options)
All tutorials I found online only shows the login/signIn without details on how to implement registration
Solution 1:[1]
Registration is the process of registering the user, saving new users' credentials into the database. It is independent of next-auth. You create a form, submit the form and save the form data properly into the database.
next-auth takes over when you are logged in, in other words, you are authenticated meaning that you are already a registered, genuine user. Once you pass the security checks and successfully logged in, next-auth creates a session for the user.
Solution 2:[2]
next-auth only supports Sign In, Sign Up and Sign Out. When a user creates an account for the first time, It registers them automatically without the need for a new set of registration process.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Yilmaz |
| Solution 2 | dephraiim |