Bug: NextAuth signIn and signOut functions not working

[KyleTryon]

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

It is currently possible to log in via Twitter and obtain a valid session by authenticating at this URL: http://localhost:3000/api/auth/signin.

There is a provided set of functions from NextAuth signIn/signOut

Within the current home page navigation, is a Sign in and Sign Out button which will show respectively depending on the truthiness of your session:

https://github.com/TechSquidTV/Shoutify/blob/main/src/pages/index.tsx#L60

Shoutify/src/pages/index.tsx

Lines 60 to 74 in 997a2ed

	{session && (
	<>
	<Button href="/app" title="App" variant="primary">
	App
	</Button>
	<Button
	onClick={() => signOut()}
	title={'sign in'}
	variant="primary"
	className="mx-2"
	>
	Sign out
	</Button>
	</>
	)}

However, currently, the onClick functions which should trigger the signIn and signOut functions to not appear to be working. There are no errors in server logs or browser console.

Steps to reproduce

1. (Configure your dev environment)[https://github.com/TechSquidTV/Shoutify#development]
2. Visit the server at http://localhost:3000/

If you have not yet signed in, you will see this:

If you do have a session, you will see this:

Attempt to click either of the Sign In or Sign Out buttons, and you should see no change in the page.

Expected behavior

According to the NextAuth signIn docs, the user should be redirected to an authentication flow.

Shoutify app version

No response

Node.js version

No response

In which operating systems have you tested?

• macOS
• Windows
• Linux

Other

No response

[princemuel]

Ok, can this be assigned to me? Thanks.

[takanome-dev]

Hey @KyleTryon the button component in /components/atoms/Button.tsx is not aware of the onCLick function that's why it does not do anything, the easy way to get around this is to spread the props like this:

    <button
+      {...props}
      className={styles}
      aria-label={props.ariaLabel || props.title}
      title={props.title}
    >
      {props.children}
    </button>

After that the button will redirect you to http://localhost:3000/api/auth/signin?error=OAuthSignin but if you click sign in with twitter button, you will probably get the following error:

[next-auth][warn][NO_SECRET] 
https://next-auth.js.org/warnings#no_secret
[next-auth][warn][TWITTER_OAUTH_2_BETA] 
https://next-auth.js.org/warnings#twitter_oauth_2_beta
[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error "ikm" must be at least one byte in length {
  error: {
    message: '"ikm" must be at least one byte in length',
    stack: 'TypeError: "ikm" must be at least one byte in length\n' +
      '    at normalizeIkm (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/@panva/hkdf/dist/node/cjs/index.js:26:15)\n' +
      '    at hkdf (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/@panva/hkdf/dist/node/cjs/index.js:47:60)\n' +
      '    at getDerivedEncryptionKey (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/jwt/index.js:114:34)\n' +
      '    at Object.encode (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/jwt/index.js:48:34)\n' +
      '    at createState (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/core/lib/oauth/state-handler.js:29:34)\n' +
      '    at getAuthorizationUrl (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/core/lib/oauth/authorization-url.js:68:53)\n' +
      '    at runMicrotasks (<anonymous>)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Object.signin (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/core/routes/signin.js:37:24)\n' +
      '    at async NextAuthHandler (/home/takanome_dev/Projects/OpenSource/TechSquidTV/Shoutify/node_modules/next-auth/core/index.js:238:26)',
    name: 'TypeError'
  },
  providerId: 'twitter',
  message: '"ikm" must be at least one byte in length'
}

After I added a value for NEXTAUTH_SECRET in the env by following this response, it successfully redirected me to twitter for login but I think I'm having issue with twitter config:

In my dashboard I only see api key api secret and bearer token not client id/client secret
Any thoughts on this??

[takanome-dev]

I forgot to mention that you should probably add process in front of env in [...nextauth].ts

providers: [
    TwitterProvider({
-      clientId: env.TWITTER_CLIENT_ID as string,
-      clientSecret: env.TWITTER_CLIENT_SECRET as string,
+     clientId: process.env.TWITTER_CLIENT_ID as string,
+     clientSecret: process.env.TWITTER_CLIENT_SECRET as string,
      version: '2.0',
    }),
  ],

[KyleTryon]

I forgot to mention that you should probably add process in front of env in [...nextauth].ts

providers: [
    TwitterProvider({
-      clientId: env.TWITTER_CLIENT_ID as string,
-      clientSecret: env.TWITTER_CLIENT_SECRET as string,
+     clientId: process.env.TWITTER_CLIENT_ID as string,
+     clientSecret: process.env.TWITTER_CLIENT_SECRET as string,
      version: '2.0',
    }),
  ],

env in this case is a wrapper library that adds type safey