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

user_13900520 0
Viewed 1187

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.

next-auth next.js reactjs authentication
2 Answers

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.

user_105212350

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

user_139763470
Related