Giter Club home page Giter Club logo

remix-auth-whoop's Introduction

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;

remix-auth-whoop's People

Contributors

noah-guillory avatar renovate[bot] avatar

Stargazers

 avatar

Watchers

 avatar

remix-auth-whoop's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting String near ], { "

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/bump.yml
  • actions/checkout v4
  • actions/setup-node v4
  • bahmutov/npm-install v1
.github/workflows/main.yml
  • actions/checkout v4
  • actions/setup-node v4
  • bahmutov/npm-install v1
  • actions/checkout v4
  • actions/setup-node v4
  • bahmutov/npm-install v1
  • actions/checkout v4
  • actions/setup-node v4
  • bahmutov/npm-install v1
.github/workflows/publish.yml
  • actions/checkout v4
  • actions/setup-node v4
npm
package.json
  • remix-auth ^3.0.0
  • remix-auth-oauth2 ^1.9.0
  • @babel/core ^7.14.2
  • @babel/preset-env ^7.14.1
  • @babel/preset-react ^7.13.13
  • @babel/preset-typescript ^7.13.0
  • @remix-run/node ^2.0.0
  • @remix-run/react ^2.0.0
  • @remix-run/server-runtime ^2.0.0
  • @typescript-eslint/eslint-plugin ^7.0.0
  • @typescript-eslint/parser ^7.0.0
  • eslint ^8.0.0
  • eslint-config-prettier ^9.0.0
  • eslint-plugin-prettier ^5.0.0
  • eslint-plugin-unicorn ^52.0.0
  • husky ^9.0.0
  • jest ^29.0.0
  • jest-fetch-mock ^3.0.3
  • prettier ^3.0.0
  • react ^18.0.0
  • ts-node ^10.8.1
  • typescript ^5.0.0
  • @remix-run/server-runtime ^1.0.0 || ^2.2.0

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.