How to setup registration for next-auth credential ( Email + password ) provider?

[yelnyafacee]

How to setup registration for next-auth credential ( Email + password ) provider?

everything I found on the web are just Sign In tutorials,

there is totally nothing about that in the next-auth documentation,

why there is little to no info of this at all on the web? is it so rare that nobody even knows or encounter this issue?

[raymclee]

You have to implement yourself. And use the authorize method to return the user object
Next-auth just doing the authentication stuff.

[AydinChavez]

[patrik-simunic-cz]

That's a nice idealistic thought... Here, in the real world, however, typical credentials flow isn't going anywhere and intentionally limiting information about best practices doesn't discourage the use of credentials, it only encourages (I'd even say promotes) bad credential design and sloppy implementation.

I'm generally quite happy with next-auth, but this intentional encouragement of bad credentials design is really disappointing...

[reorx]

The fact that next-auth lacks support for the de-facto standard of username-password authentication in real world is such a shame, idealism should not be put in a general-purpose auth library. As software engineers, our focus is on solving problems rather than defining standards.

[yelnyafacee]

You have to implement yourself. And use the authorize method to return the user object
Next-auth just doing the authentication stuff.

Hi, can you show a brief example?
or is it something like this:

    /*
    |--------------------------------------------------------------------------
    | Function : Handle Register
    |--------------------------------------------------------------------------
    */
    const handleRegister = (e) => {

        e.preventDefault()

        /*
        |--------------------------------------------------------------------------
        | axios Request
        |--------------------------------------------------------------------------
        */
        await axios.post(ajax_register_url, ajax_register_post_params)
		.then(response => {

			// Registration Success
			if(response.data.status === 'success') {
            
            	// Login
                signIn('credentials',
                    {
                        email,
                        password,
                        callbackUrl: callbackUrl
                    }
                )
            
            } else {
            
            	// Error
            
            } 

		}).catch((error) => {

			// Error

			console.log(error.config);

		});

    }
    

[yelnyafacee]

Guess the lack of information/functioniality is by intention:

"The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords."
(https://next-auth.js.org/providers/credentials)

But email + password authorization method is norm and used everywhere,
this is my [...nextauth].js:

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)

what other better 'email + passwordauthentication methods are there fornextjs`?

[raymclee]

Guess the lack of information/functioniality is by intention:
"The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords."
(https://next-auth.js.org/providers/credentials)

But email + password authorization method is norm and used everywhere,
this is my [...nextauth].js:

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)

what other better 'email + passwordauthentication methods are there fornextjs`?

just return the user from authorize and it will pass the user object to jwt callback for token creation

  if (user) {
    return user.data
}

[raymclee]

Guess the lack of information/functioniality is by intention:
"The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords."
(https://next-auth.js.org/providers/credentials)

But email + password authorization method is norm and used everywhere,
this is my [...nextauth].js:

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)

what other better 'email + passwordauthentication methods are there fornextjs`?

maybe passport?
https://github.com/vercel/next.js/tree/canary/examples/with-passport

[yelnyafacee]

@raymclee hi, for the registration function:

is it correct that I should do something like this?

    /*
    |--------------------------------------------------------------------------
    | Function : Handle Register
    |--------------------------------------------------------------------------
    */
    const handleRegister = (e) => {

        e.preventDefault()

        /*
        |--------------------------------------------------------------------------
        | axios Request
        |--------------------------------------------------------------------------
        */
        await axios.post(ajax_register_url, ajax_register_post_params)
		.then(response => {

			// Registration Success
			if(response.data.status === 'success') {
            
            	// Login
                signIn('credentials',
                    {
                        email,
                        password,
                        callbackUrl: callbackUrl
                    }
                )
            
            } else {
            
            	// Error
            
            } 

		}).catch((error) => {

			// Error

			console.log(error.config);

		});

    }
    

[raymclee]

@raymclee hi, for the registration function:

is it correct that I should do something like this?

    /*
    |--------------------------------------------------------------------------
    | Function : Handle Register
    |--------------------------------------------------------------------------
    */
    const handleRegister = (e) => {

        e.preventDefault()

        /*
        |--------------------------------------------------------------------------
        | axios Request
        |--------------------------------------------------------------------------
        */
        await axios.post(ajax_register_url, ajax_register_post_params)
		.then(response => {

			// Registration Success
			if(response.data.status === 'success') {
            
            	// Login
                signIn('credentials',
                    {
                        email,
                        password,
                        callbackUrl: callbackUrl
                    }
                )
            
            } else {
            
            	// Error
            
            } 

		}).catch((error) => {

			// Error

			console.log(error.config);

		});

    }
    

yes you can do that

[yelnyafacee]

yes you can do that

@raymclee in the signIn('credentials', ... ) should I just take the values of email + password directly from ajax_register_post_params? or from the axios response.data?

[raymclee]

yes you can do that

@raymclee in the signIn('credentials', ... ) should I just take the values of email + password directly from ajax_register_post_params? or from the axios response.data?

I think better take email and password from user input (ajax_register_post_params). The data in response should't include password

[balazsorban44]

@yelnyaface please don't open duplicate issues, it creates overhead

#2282

I answered there.

[swport]

In one or two examples above, I saw how they're calling signin client-side function to perform login after successful registration. This shouldn't be the case. There should be a server side signin function that logs a user into the session while the request is on the server itself.

Coming from Laravel, Ruby-on-rails makes me realize how much we take stuff for granted. Something that's should've been a trivial task from nextauth side, requires us to implement broken solutions.