next-auth credential registration flow

[yelnyafacee]

Hi, am new to next-auth,

How does the credential ( username + password ) registration flow looks like?

this is my normal flow without react:
input username + email + password > submit form > [api] create user in database > create successful > login user > return success json response

with next-auth, I know I can sign in with signIn('credentials', { .... }); and the access token will be stored in session etc all done within signIn()

is there another register() function that I can use for registration?

[balazsorban44]

next-auth merges those two actions. If the user signs in the first time, the user will be created in the database.

In that case, the jwt callback receives an isNewUser argument, if you need to prepend any additional data to the user.

One caveat using the Credentials flow though, that these users won't be saved in a database, as we generally discourage this username+password flow.

https://next-auth.js.org/providers/credentials

[yelnyafacee]

Hi, can you please elaborate more on how to add in the registration code in the [...nextauth].js?

I am using an external API to register like: api/v1/register

is it possible to register + login immediately after registered?

[raulmarindev]

Hello, I'm really interested in this also.

[yelnyafacee]

#2285

[YMMTech]

Hey, i don't know if this is relevant and if it answers the question but i am asking myself if what i did is ok to do or not:

• so i used Google as the provider
• added a signin callback
• added authorized emails to my database
• checked in the signin callback if the profiles email is verified and in the authorized email list

something like this :
async signIn({ account, profile }) { return profile.email_verified && emails.includes(profile.email) },

[EverStarck]

I did in this way:

  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "credentials",
        username: {
          label: "Email",
          type: "email",
          placeholder: "john@gmail.com",
        },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        try {
          const res = await fetch(
            `${process.env.API_BASE_URL}/v1/login/`,
            {
              method: "POST",
              body: new URLSearchParams(credentials),
              headers: { "Content-Type": "application/x-www-form-urlencoded" },
            }
          );

          const token: Token = await res.json();

          if (res.status !== 200) {
            throw new Error("Incorrect password");
          }

          const decodedJwt: DecodedJWT = jwtDecode(token.access);

          return decodedJwt as User;
        } catch (error) {
          return null;
        }
      },
    }),
    CredentialsProvider({
      id: "register",
      name: "register",
      credentials: {
        email: {
          label: "Email",
          type: "email",
          placeholder: "john@gmail.com",
        },
        password: { label: "Password", type: "password" },
        name: {
          label: "Name",
          type: "text",
        }
      },
      async authorize(credentials) {
        try {
          const res = await fetch(`${process.env.API_BASE_URL}/v1/register/`, {
            method: "POST",
            body: JSON.stringify(credentials),
            headers: { "Content-Type": "application/json" },
          });

          const token: Token = await res.json();

          if (res.status !== 200) {
            throw new Error("User already exists");
          }

          return token as User;
        } catch (error) {
          return null;
        }
      },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.access = token.access;
      session.exp = token.exp;
      session.refresh = token.refresh;
      session.user = token.user;
      return session;
    },
    async jwt({ token, user, account }) {
      // initial signin
      if (user && account) {
        return user as JWT;
      }

      // Return previous token if the access token has not expired
      if (Date.now() < token.exp * 100) {
        return token;
      }

      // refresh token
      return (await refreshAccessToken(token)) as JWT;
    },
    async redirect({ url, baseUrl }) {
      return url.startsWith(baseUrl)
        ? Promise.resolve(url)
        : Promise.resolve(baseUrl);
    },
  },

credentials is the login.

For more info check: https://next-auth.js.org/providers/credentials#multiple-providers

[niclimcy]

An update to authjs is you no longer need to define custom callbacks for Credentials provider, just set the session strategy to jwt using:

  session: {
    strategy: 'jwt' as 'jwt',
  },

This means that sessions for oauth providers will also be managed using jwt instead of through a database for session management. Honestly this is more consistent and I wished that Credentials provider would also support database sessions

[NafiAsib]

@EverStarck Does your refreshAccessToken() function works as expected?

[EverStarck]

hi @NafiAsib, I left the project lmao, so not sure rn, but I remember it worked as expected 🤔