'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