From Start to Finish: Integrating Strava API in Next.js

From Start to Finish: Integrating Strava API in Next.js

Recently, I saw a tweet with a dude asking if the contributors graph that we have on Github/Gitlab was existing for workouts. So it gave me the idea to try what is possible with Strava. (Spoiler: I did it — Here).

Little introduction

As you can guess, I took some time to play with the Strava API. And today, I will share how I made it work with Next.js (my favorite React.js Framework).

To start this article, I used my Next.js boilerplate which I’ve emptied a bit. If you want to start

git clone git@gitlab.com:dommangetnicolas/nextjs-strava.git
cd nextjs-strava
git reset --hard c6a426799de2655604593381b3cae75d20abedbe

Now that we are set, we can install dependencies:

npm i

Authenticating with Strava

First things first, we will make our users able to authenticate with their Strava account.

We will start by adding sign-in and sign-out buttons inside src/pages/index.tsx:

Obtain your Strava API Keys

In order to continue, we will need your developer’s API Keys. You can find them here: https://www.strava.com/settings/api

Copy your client_id, client_secret inside the environment variables file (.env.development.local):

We will talk later about NEXT_PUBLIC_STRAVA_REDIRECT_URI

How is OAuth working with Strava?

You can find detailed information about the Strava OAuth System here. But I’ll quickly explain to you how it is working and show you how we are going to implement it.

1. First, we will redirect our user to a Strava “Authorization page”. In query params, we will provide our client_id and redirect_uri. The redirect URL is required to allow Strava to redirect to the right place on our app.

Strava Auth page

2. Once Strava has redirected the user to our app accompanied by a code, we will send it to our back-end.

3. Our back-end will request an access token to the Strava API by passing the code we received coupled with our client_secret and client_id.

4. After that, we’ll store the access_token in our db (A JSON file in the case of this article).

Redirecting the user to Strava

In this step, we will implement the “Sign in with Strava” button. I’ll create a simple function under src/modules/auth/functions/getStravaAuthUrl.ts

This little function gives us the redirect URL based on our environment variables. You can now set NEXT_PUBLIC_STRAVA_REDIRECT_URI as follow:

NEXT_PUBLIC_STRAVA_REDIRECT_URI=<base_app_url>/auth/strava

You can update src/pages/index.tsx signin button like this:

Handling the callback from Strava

While redirecting to Strava auth page, we told it to redirect to /auth/strava. We now need a page to handle this callback. You can find an example below: (src/auth/strava.tsx)

In the sign-in callback, we are reading the Strava code from query parameters. Once we get the code, we send it to our back-end (which will be implemented just after).

The back-end route that we need to create under src/pages/api/auth/strava.ts will handle the code received by Strava.

• We will call the Oauth route of Strava to get a user access token.
• Save this authToken in db
• Create our own JWT token and set it as a cookie

I am saving the Strava auth_token in db and not directly in cookies because I want to keep control of it and not share it with the client.

Our API route looks like this:

Creating a simple User Dashboard

Now our awesome users can access our app using their Strava account. We can get their activities by calling the Strava API with the saved Auth Token.

We’ll quickly create a new API Route under src/pages/api/activities.ts as below:

Here we are getting our JWT token from the cookies in order to retrieve the access_token from the database. Then we just have to call Strava with this access_token to fetch the athlete activities.

A simple list of activities

We’ll create a simple list of activities as follow:

Wrap up

We are now able to use Strava to authenticate our users and fetch their data. We can do much more with the Strava API.

Access the Gitlab repo here.

You can find my other articles and follow me here. Thanks for reading, I hope you learned something new today 🚀

Why you should use alternatives to Google Analytics

Delete your old GitLab CI pipelines