Package Exports

remix-auth-strava-strategy
remix-auth-strava-strategy/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remix-auth-strava-strategy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

StravaStrategy

The Strava strategy is used to authenticate users against a Strava account. It extends the OAuth2Strategy.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	not yet tested

Usage

This strategy is used with the remix-auth package. Make sure to follow their instructions on how to use a strategy.

A minimal working example can be found in the examples folder.

Create an OAuth application

Follow the steps on the Strava documentation to create a new application and get a client ID and secret.

Create the strategy instance

import { StravaStrategy } from 'remix-auth-strava-strategy'

let strategy = new StravaStrategy(
  {
    clientID: 'your-client-id', //required
    clientSecret: 'your-client-secret', //required
    redirectURI: 'your-url/auth/strava/callback', //required
    approvalPrompt: 'force', // optional, defaults to 'auto'
    scope: ['read', 'activity:read'], // optional, defaults to ['read']
  },
  async ({ accessToken, extraParams, profile, refreshToken, context }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ id: profile.id })
  }
)

authenticator.use(strategy)

scope is an array of strings. The default scope is ['read']. The available scopes are: read read_all profile:read_all profile:write activity:read activity:read_all activity:write.
approvalPrompt is a string. The default value is 'auto'. The available values are: auto force.

Refer to the Strava documentation for more information on the scopes and approval prompt.

Setup your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action='/auth/strava' method='post'>
      <button>Login with Strava</button>
    </Form>
  )
}

// app/routes/auth/strava.tsx
import type { ActionArgs } from '@remix-run/node'
import { redirect } from '@remix-run/node'
import { authenticator } from '~/auth.server'

export async function loader() {
  return redirect('/login')
}

export async function action({ request }: ActionArgs) {
  return authenticator.authenticate('strava', request)
}

// app/routes/auth/strava/callback.tsx
import type { LoaderArgs } from '@remix-run/node'
import { authenticator } from '~/auth.server'

export async function loader({ request }: LoaderArgs) {
  return authenticator.authenticate('strava', request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  })
}