Google / Facebook Login

[m4tt133]

Hi!

I am currently using next-auth for session management, and I am having issues with the custom Google sign-in flow.

The problem happens when the user tries to log in to an account for a second or more time after the initial account has been created.

Sometimes the front end doesn't seem to log in to swell, I assume that it is a matter of different tokens that are sent from Google and the existing ones for an account that is already in Swell's database, and was created using only Google's token on initial account creation.

Assuming that we implement the code mentioned on your community hub:

• Make a request from your front-end to your server-side app:

const response = await axios.get('/api/generateToken', {
  params: {
    email: '<user email>'
  }
});
const token = response.data.password_token;

• Generate a token server-side:

const email = req.query.email

// respond with password_token created on the account object
const response = await swell.put(`/accounts/${email}`, {
    password_token: null
})

res.status(200).json(response)

• Login client app with returned token

await swell.account.login('<email>', {
  password_token: token
})

When I do change the tab the code refreshes and sometimes the authentication process passes.

Here's my request to a backend - next-auth:

<button onClick={() => signIn('google', { callbackUrl: '/user/login' })}>
      Sign In With Google
</button>

Here's token generation:

export default NextAuth({
  providers: [
    CredentialsProvider({
        name: 'Credentials',
        credentials: {
          email: { label: "Email", type: "email" },
          password: {  label: "Password", type: "password" }
        },
        async authorize(credentials, req) {
          const { email, password } = credentials
          const user = await swell.account.login(email, password)

          if (user !== null){
            return user
          }

          return null
        }
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    })
  ],
  callbacks: {
      async jwt({ token }) {
        if(token){
          try{
            const response = await swellBack.put(`/accounts/${token.email}`, {
              password_token: null
            }) 
  
            return response
          }
          catch(err){
            console.log(err)
          }
        }

        return token
      },
      async session({ session, token }) {

        if(token){
          session.user.id = token.id
          session.user.image = token.profile_img
          session.user.token = token.password_token
          session.user.wishlist = token.wishlist
          session.user.email_optin = token.email_optin
        }

        return session
      }
  },
  secret: process.env.NEXT_AUTH_SECRET,
  jwt: {
    secret: process.env.JWT_SECRET,
    encryption: true
  },
  pages: {
    signIn: '/user/login',
    error: '/error'
  },
  session:{
    strategy: 'jwt'
  }
})

Here's the code that I am using to check if the session is present (when Google authenticated properly):

const { data: session } = useSession()
    
    async function fetcher(session){
        if(session){
            const user = await swell.account.login(session?.user?.email, { password_token: session?.user?.token })

            return user
        }      
    }
    
    const { data, error } = useSWR(session, fetcher)

I am aware that useSWR will try to revalidate the query and begin a new Swell session, but the session token stored in the next-auth session object stays the same, that's why I am having a hard time understanding the problem.

And here's a screenshot of what's happening:

1 - Next-auth session (No problems at all)
0 - Swell Session (Sometimes it drops)

I would be really grateful for some help in resolving the issue / providing some guidance on how to approach this.

I think that it would also be really helpful for those that are building using Next.js and Swell.

Thanks in advance!

[alextutii]

Hi @m4tt133 ! Thanks for providing all the info on how to reproduce this issue. I was able to set this up and I ended up having the same problem.

Apparently useSession would not return the most up to date token that jwt() generates, which causes the request to swell.account.login to fail. Therefore I would only use the data from useSession to initialise useSWR, but inside the fetcher I call getSession to get the most up to date session object.

Then the code would look something like this:

  // Ref to check against if we're currently fetching so we don't override current fetch
  const fetching = useRef(false);

  async function fetcher() {
    if (fetching.current) return;

    fetching.current = true;

    // Get the most up to date session
    const currentSession = await getSession();

    if (!currentSession) {
      fetching.current = false;
      return null;
    }

    const user = await swell.account.login(currentSession?.user?.email, {
      password_token: currentSession?.user?.token,
    });

    fetching.current = false;
    return user;
  }

  const { data: session } = useSession();
  const { data, error } = useSWR(session, fetcher);

It's a bit odd that useSession would not return the most up to date session when passed to useSWR.

[m4tt133]

Hi @alextutii , unfortunately, the problem still exists, and currently, I cannot get this over with, I had many attempts at fixing it. It is behaving just like last time, even with your code. Would you be able to help me by providing the contents of your [...nextauth].js file? I think that I might have configured it wrongly.

[m4tt133]

It also seems that even though my next-auth backend returns the latest token, the useSession hook is not catching up with the changes:

The password_token on Swell:

The Terminal (Next-auth):

The Console (useSession):

Is there any way to overcome this?

Thanks in advance :)

[ericingram]

Maybe @AdrianRC would have some insight on this

[stafyniaksacha]

If we don't set the cookie at initialization, it will be read before each request. Unfortunately, we can not provide such getter/setter. Here is the related issue: swellstores/swell-js#82