Hi everyone,
I am currently working on a project that involves OAuth and interacting with the Strava API. The tech stack I am using is Next.js, Tailwind, and TypeScript. My goal is to have the user be prompted with a sign-in button that redirects them to the Strava OAuth Redirect URI. Once they log in, I want to make an API call to display some information from Strava. However, I'm having trouble linking the whole process together.

Here is my auth.ts:

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

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Strava],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
});

I have the session provider wrapped in my layout.tsx file. I’m not even worrying about the API part yet because I can’t get the OAuth part working correctly.

Here’s my app/api/stravaData/route.ts:

import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function GET(req: any) {
  const token = await getToken({
    req,
    salt: "your_salt_value",
    secret: "your_secret_value",
  });

  if (!token || !token.accessToken) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const response = await fetch("https://www.strava.com/api/v3/athlete", {
    headers: {
      Authorization: `Bearer ${token.accessToken}`,
    },
  });

  const data = await response.json();
  return NextResponse.json(data);
}

I am still learning a lot about the OAuth flow, but I think I overwhelmed myself trying to learn all of this at once. Any guidance would be much appreciated.