CODEWITHSUNDEEP
reactjsauthenticationnext.jsnext-auth
Anargyros Stylidis
Anargyros Stylidis

Reputation: 279

Next-auth check if user signs in for the first time

How to check if the it's the first time the user signs in using Next-Auth?

I have tried implementing the newUser page following the official documentation, but it doesn't really seem to work. This is my pages configuration in [...nextauth].js file:

pages: {
    signIn: "/auth/login",
    newUser: "/auth/new-user",
  },

I have also tried checking the isNewUser parameter on the jwt callback but I just get the signed in user's data which there's no use for:

 callbacks: {
    jwt: async (token, user, account, isNewUser) => {
   
    console.log(isNewUser)
    \\There is no relevant info using this
 }
}

My application needs more info when the user creates an account (Home address, birth date etc.) which are not always available using SSO. I need to check if it's the first time the user signs in so I can redirect them to a form to complete their missing information.

Upvotes: 5

Views: 8134

Answers (3)

Victor
Victor

Reputation: 217

The pages config works as expected for me, with:

  • NextJs: 14 (with app router)
  • NextAuth (AuthJs): 5.0.0-beta.16

The AuthJs Docs for the page config is not super helpful, but from the PagesOptions interface it says:

(property) newUser?: string | undefined
If set, new users will be directed here on first sign in

This is my setup:

// (root)/auth.config.ts
pages: {
  signIn: "/login",
  newUser: "/onboarding", // Users land on this page when they first sign up/log in
},


// (root)/auth.ts

import { authConfig } from './auth.config';

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  ...authConfig,
  // Providers
  // Callbacks
});

// app/api/auth/[...nextauth]/route.ts

export { GET, POST } from '@/auth';

Upvotes: 0

Mikhail
Mikhail

Reputation: 13

I ran into the same issues, and it turned out that it is much easier to redirect new users to a dedicated page to fill in the missing info before they can proceed

Upvotes: 0

Jevon Cochran
Jevon Cochran

Reputation: 1774

A simple way to accomplish this would be to use the cookies-next library which you can find here. Check out the link as they have really simple and useful explanations.

Anyway, for your purposes, you could check and see if the user is signing in for the first time by setting/retrieving cookies that have this information stored on it. You can set and retrieve the cookie in whatever page/component you want but it sounds like in your case, you would want to do so in like a Dashboard page or component.

Let's say the user signs in with next/auth and upon sign in, gets routed to a dashboard page. You can use the cookies-next library to check if it's the users first time on that dashboard page.

import { setCookies } from "cookies-next";
 
export default function Dashboard({ pageVisited }) {
  // This is how the cookie would be set when the user accesses the dashboard page for the first time
  useEffect(() => {
    if (!pageVisited) {
      setCookies("pageVisited", true);
    }
  }, []);

  // You can do some conditional logic if it's the user's first time signing in
  if (!pageVisited) {
    // return something
  }
}

export const getServerSideProps = async (ctx) => {
  const { pageVisited } = ctx.req.cookies;

  return { props: { pageVisited: pageVisited ?? null } };
};

If you need to retrieve the cookie from another component to perform some logic based on if the user is a first time visiter or not, you can follow the same pattern as above:

export default function AnotherComponent({ pageVisited }){
  if (pageVisited) {
    // return something
  }
}

export const getServerSideProps = async (ctx) => {
  const { pageVisited } = ctx.req.cookies;

  return { props: { pageVisited: pageVisited ?? null } };
};

Note: Users can manually delete cookies and in that case, even if they have signed in before, your application would read them as a first timer.

Upvotes: 2

Related Questions