Pass in session data in SignInButton

[codercody]

In the with-next-auth example, I noticed if you sign in then hit refresh, the SignInButton believes you're not signed in and says "Sign In" rather than being a ProfileButton. This is because SignInButton is not aware of the data in the current session. It would be nice to be able to pass session data into SignInButton so that it can know you're already authenticated and display the right button.

auth-monorepo/examples/with-next-auth/pages/index.tsx

Lines 59 to 64 in e5fa7ef

	<SignInButton
	nonce={getNonce}
	onSuccess={handleSuccess}
	onError={() => setError(true)}
	onSignOut={() => signOut() }
	/>

[Markkos89]

I'm facing the same issue and it's turning nuts to store the session manually.. any hint on this?
or is this possible to update in the core library?

[ramiechaarani]

I'm facing the same issue and it's turning nuts to store the session manually.. any hint on this?

or is this possible to update in the core library?

Did you ever solve this?

[Markkos89]

I'm facing the same issue and it's turning nuts to store the session manually.. any hint on this?
or is this possible to update in the core library?

Did you ever solve this?

Nope, I changed to use neynar auth for the moment

[alexkubica]

having same issue
trying to clone and run the library locally so i can make the changes to make it work
i'm following the next-auth example from the docs and tried to add message & signature to session so i can call signIn again after loading the session
not sure this is a good idea but it didn't work anyways, the sign in button stays in the same state

[alexkubica]

btw i believe a quick workaround would be to check session yourselves and render a ProfileButton as they do in the SignInButton
https://github.com/farcasterxyz/auth-monorepo/blob/main/packages/auth-kit/src/components/SignInButton/SignInButton.tsx#L99

[briangershon]

The solution may be to modify the library to do this:

1. Move the state management logic into a hook
2. Export the various button (not just <SignInButton> but also <ProfileButton> and <SignOutButton>) and then users could use those components directly or create their own. The components would become simpler versions since the state management would now be in the hook and these would be more display-only.

Workaround

I used a similar workaround to what @alexkubica mentions above.

To get the with-next-auth example working with sessions, here's what I did:

First, I turned on jwt to get the session support in next-auth in [...nextauth].ts route:

const auth = (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, {
  
    // I ADDED `session:` and `callbacks:`

    session: { strategy: "jwt" },
    callbacks: {
      async session({ session, token, user }) {
        session.user.fid = token.sub ?? "";
        return session;
      },
    },

    providers: [
      CredentialsProvider({
...

Second, I wrapped <SignInButton> in my own component to handle the various states (I called it <Login />) which has the example <SignInButton> to kick things off, but then once session was set, I used my own profile and sign-out logic based on session to work around issue.

The example has a <Profile /> component that was basically doing the same thing, I had just ended up with my own, called <Login />:

const { data: session } = useSession();
...
        <div className="p-2">

          // IF NO SESSION, DO THE SIGN-IN THING
          {session == null && (
            <SignInButton
              nonce={getNonce}
              onSuccess={handleSuccess}
              onError={() => setError(true)}
              onSignOut={() => signOut()}
            />
          )}

          // IF SESSION, THEY LOGGED IN AND SESSION WAS SET, SO DISPLAY MY OWN PROFILE AND SIGN OUT OPTION
          {session != null && (
            <div>
              {session?.user?.image && (
                <div className="flex items-center">
                  <Image
                    className="rounded"
                    height="36"
                    width="36"
                    src={session.user.image}
                    alt="pfp"
                  />
                  <div>{session?.user?.name}</div>
                </div>
              )}{" "}

              <button onClick={() => signOut()}>Sign out</button>

            </div>
          )}
        </div>
      </div>

Third, in my app (say for the Home page), I simplified by just using the standard next-auth session logic since I had moved all the login related code into <Login />:

import { useSession} from "next-auth/react";
...
const { data: session } = useSession();
...
  <main>
    <Login />
    {session == null && <div>Not logged in</div>}
    {session != null && <div>Logged in</div>}
  </main>