next-auth: Strava provider returns 400 bad request

Question 💬

Hello,

I have created a vanilla Next.js project and added version 4 of next-auth. I am trying to use the Strava provider, but I am receiving a 400 bad request. I am not sure if this is a bug, or a mistake I have made, any help would be appreciated. I have done the following.

Created an API/Oauth application on Strava.

strava_01 strava_02

Populated _app.js with the following.

import '../styles/globals.css'

import { SessionProvider } from "next-auth/react"

export default function App({
  Component, pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider>
  )
}

Populated index.js with the following.

import styles from "../styles/Home.module.css";
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if(session) {
    return <>
      Signed in as {session.user.email} <br/>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

Created ./api/auth/[…nextauth].js and populated it with the following. Ref: https://next-auth.js.org/providers/strava

import NextAuth from 'next-auth'
import StravaProvider from 'next-auth/providers/strava'

export default NextAuth({
  providers: [
    StravaProvider({
      clientId: process.env.STRAVA_CLIENT_ID,
      clientSecret: process.env.STRAVA_CLIENT_SECRET,
    })
  ]
})

Created ./.env.local file and populated it with the following. I have also tried passing in the environment variables as string quoted.

STRAVA_CLIENT_ID=12345
STRAVA_CLIENT_SECRET=examplesecret
NEXTAUTH_URL=http://localhost:3000/

When I try logging in using Strava with either the user I created the application under, or a separate Strava user I created for testing, I receive the following error.

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 400 Bad Request {
  error: {
    message: 'expected 200 OK, got: 400 Bad Request',
    stack: 'OPError: expected 200 OK, got: 400 Bad Request\n' +
      '    at processResponse (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/helpers/process_response.js:48:11)\n' +
      '    at Client.grant (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/client.js:1265:26)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Client.oauthCallback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/client.js:561:24)\n' +
      '    at async oAuthCallback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/lib/oauth/callback.js:114:16)\n' +
      '    at async Object.callback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/index.js:132:28)\n' +
      '    at async NextAuthNextHandler (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/next/index.js:16:19)\n' +
      '    at async /scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/next/index.js:52:32\n' +
      '    at async Object.apiResolver (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next/dist/server/api-utils.js:102:9)',
    name: 'OPError'
  },
  providerId: 'strava',
  message: 'expected 200 OK, got: 400 Bad Request'
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error expected 200 OK, got: 400 Bad Request OPError: expected 200 OK, got: 400 Bad Request
    at processResponse (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/helpers/process_response.js:48:11)
    at Client.grant (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/client.js:1265:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Client.oauthCallback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/openid-client/lib/client.js:561:24)
    at async oAuthCallback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/lib/oauth/callback.js:114:16)
    at async Object.callback (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/routes/callback.js:50:11)
    at async NextAuthHandler (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/core/index.js:132:28)
    at async NextAuthNextHandler (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/next/index.js:16:19)
    at async /scratch/fitness-dashboard/fitness-dashboard/node_modules/next-auth/next/index.js:52:32
    at async Object.apiResolver (/scratch/fitness-dashboard/fitness-dashboard/node_modules/next/dist/server/api-utils.js:102:9) {
  name: 'OAuthCallbackError',
  code: undefined
}
[next-auth][warn][NO_SECRET]

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (8 by maintainers)

Most upvoted comments

@markandrewj @krautwigundrueben it’s working for me with this custom provider:

{
      id: "strava",
      name: "Strava",
      type: "oauth",
      clientId: YOUR_CLIENT_ID,
      clientSecret: YOUR_CLIENT_SECRET,
      authorization: {
        url: "https://www.strava.com/api/v3/oauth/authorize",
        params: {
          scope: "profile:read_all",
          approval_prompt: "force",
          response_type: "code",
          redirect_uri: "http://localhost:3000/api/auth/callback/strava",
        },
      },
      token: {
        url: "https://www.strava.com/api/v3/oauth/token",
        async request(context) {
          const response = await fetch(context.provider.token.url, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...context.params,
              client_id: context.provider.clientId,
              client_secret: context.provider.clientSecret,
              grant_type: "authorization_code",
            }),
          });

          const { refresh_token, access_token, token_type, expires_at }: any =
            await response.json();

          return {
            tokens: {
              refresh_token,
              access_token,
              token_type,
              expires_at,
            },
          };
        },
      },
      userinfo: "https://www.strava.com/api/v3/athlete",
      profile(profile) {
        return {
          id: profile.id,
          name: `${profile.firstname} ${profile.lastname}`,
          email: null,
          image: profile.profile,
        };
      },
    }

gempi on Dec 24, 2021

@krautwigundrueben if you have time for pull request - go for it, because I am off for a while.

gempi on Dec 25, 2021

Hey @krautwigundrueben thanks for following up. I tried editing the provider directly and creating a custom provider. Using either method resulted in the same error. There is more up to date information in #2524. There is likely something small I have got wrong. I was getting frustrated after testing for a while though, so I took a break from it. I am going to try again while I have some time over the holidays.

markandrewj on Dec 23, 2021