Package Exports

remix-auth-whoop
remix-auth-whoop/build/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-whoop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Remix Auth - Whoop Stategy

The Whoop Strategy is used to authenticate users through Whoop's OAuth flow using Remix-Auth, built on top of the OAuth2Strategy.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	Untested

How to use

Create Whoop Developer account and App

Follow the directions in the Whoop Developer Documentation to set up a developer account and App. Here, you define the OAuth scopes that you will be accessing and configurting the redirect URIs.

Install Dependencies

npm install remix-auth-whoop remix-auth remix-auth-oauth2

Create the Stategy Instance

// app/services/auth.server.ts
import { WhoopStrategy } from "remix-auth-whoop";
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";

/**
 * Note: The `User` type is a type that you have defined somewhere in your application
 */
export let authenticator = new Authenticator<User>(sessionStorage);

let whoopStrategy = new WhoopStrategy(
  {
   clientID: "CLIENT_ID",
   clientSecret: "CLIENT_SECRET",
   callbackURL: "https://example.com/auth/whoop/callback", // This URL must be configured as a callback URI in the Whoop Developer dashboard
   scope: ["read:profile", "read:cycles", "offline"] // Optional
  },
  async ({ accessToken, refreshToken, extraParams: { expires_in }, profile }) => {
   const {first_name, last_name, user_id} = profile

    const createUserParams = {
        accessToken,
        expiresAt: Date.now() + expires_in * 1000,
        firstName: first_name,
        lastName: last_name,
        refreshToken,
        userId: user_id,
    }

    const user = await prisma.user.upsert({
        where: {userId: user_id},
        create: createUserParams,
        update: createUserParams,
    })
  }
);

authenticator.use(whoopStrategy);

Note: See Whoop API Documentation on possible scopes

Setup your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <form action="/auth/whoop" method="post">
      <button>Login with Whoop</button>
    </form>
  );
}

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

export const loader = () => redirect("/login");

export const action = ({ request }: ActionArgs) => {
  return authenticator.authenticate("whoop", request);
};

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

export const loader = ({ request }: LoaderArgs) => {
  return authenticator.authenticate("whoop", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};

Add Session Storage

// app/services/session.server.ts
import { createCookieSessionStorage } from "@remix-run/node";

export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session", // use any name you want here
    sameSite: "lax", // this helps with CSRF
    path: "/", // remember to add this so the cookie will work in all routes
    httpOnly: true, // for security reasons, make this cookie http only
    secrets: ["s3cr3t"], // replace this with an actual secret
    secure: process.env.NODE_ENV === "production", // enable this in prod only
  },
});

export let { getSession, commitSession, destroySession } = sessionStorage;