NextAuth Strava Provider - Unable to get accessToken back

[james-millner]

Hi folks 👋🏻

I've got a really basic NextJS app that leverages the Strava Provider. Which seems to work OK so far, but I'm not sure if I'm encountering a pebcac issue (most likely!)

So I've got my [...nextauth]/route.ts setup as follows:

import NextAuth from "next-auth";
import StravaProvider from "next-auth/providers/strava";

const handler = NextAuth({
    providers: [
        StravaProvider({
            clientId: process.env.STRAVA_CLIENT_ID,
            clientSecret: process.env.STRAVA_CLIENT_SECRET,
        })
    ]
});

export { handler as GET, handler as POST }

Then on my login page I have the following (trimmed for this post):

'use client';

import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"

export default function LoginPage() {

  const { data: session } = useSession()

  if(session && session.user) {
    console.log(session)
    return (
      <>
        <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
          You are signed in lol. {session.user.name}
        </h2>
      </>
    )
  } else { 

  return (
    <>
      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
          <div>
            <button
              className="<shrunkclassnames>"
              onClick={() => signIn()}
            >
              Sign in with Strava 
            </button>
          </div>
        </div>
    </>
  )
}
}

This all works great, and I get back a user correctly. But I'm also expecting an accessToken back to make subsequent requests out to the provider in question.

Am I missing something? 🙏🏻

[james-millner]

Frustratingly found this out moments after posting this, but will share for visibility:

I needed to add a callback to get this.

Although this isnt explicit in the docs

const handler = NextAuth({
    providers: [
        StravaProvider({
            clientId: process.env.STRAVA_CLIENT_ID,
            clientSecret: process.env.STRAVA_CLIENT_SECRET,
            token: {
                async request({ client, params, checks, provider }) {
                    const { token_type, expires_at, refresh_token, access_token } =
                        await client.oauthCallback(provider.callbackUrl, params, checks);

                    console.log('token_type', token_type);
                    console.log('expires_at', expires_at);
                    console.log('refresh_token', refresh_token);
                    console.log('access_token', access_token);
                    return {
                        tokens: { token_type, expires_at, refresh_token, access_token },
                    };
                },
            },
        })
    ]
});

[karltiama]

Hi james, I was trying to achieve a similar application to have some hands on practice with Authentication and API calls, I was wondering if I could ask you some questions, and maybe get some guidance on the whole process. Thank you for your time!