Session Strategies
Notion

Notion Strategy

Allow users to login with Notion.

Setup your application at Notion integrations (opens in a new tab) The integration should be setup as Public integration

Copy OAuth client ID and OAuth client secret to your NotionStrategy setup and setup the Redirect URI.

Notion requires that the redirect URI uses HTTPS. In development you can use a service like ngrok (opens in a new tab) to be able to test the integration.

💡

NPM Package not availabe! Please clone Github Repository (opens in a new tab)

Supported runtimes

RuntimeHas Support
Node.js✅
Cloudflare✅

Setup Guide

Create the strategy instance

app/services/auth.server.ts
let notionStrategy = new NotionStrategy(
  {
    clientID: "",
    clientSecret: "",
    callbackURL: "https://domain-name.com/auth/notion/callback",
  },
  async ({ accessToken, extraParams, profile }) => {
    return {
      accessToken,
      id: profile.id,
      name: profile.name,
    };
  }
);
 
authenticator.use(notionStrategy);

Setup your routes

app/routes/auth/notion.tsx
import { ActionFunction, LoaderFunction, redirect } from "remix";
import { authenticator } from "~/auth.server";
 
export let loader: LoaderFunction = () => redirect("/login");
 
export let action: ActionFunction = ({ request }) => {
  return authenticator.authenticate("notion", request);
};
app/routes/auth/notion/callback.tsx
import { ActionFunction, LoaderFunction, redirect } from "remix";
import { authenticator } from "~/auth.server";
 
export let loader: LoaderFunction = async ({ request }) => {
  return authenticator.authenticate("notion", request, {
    successRedirect: "/success",
    failureRedirect: "/login",
  });
};

Now you can direct the user to login by making a Form with POST to /auth/notion

app/routes/auth/notion.ts
import { Form } from "remix";
 
export default function Index() {
  return (
    <Form action="/auth/notion" method="POST">
      <button>Login with Notion</button>
    </Form>
  );
}
Okta StrategyTwitch Strategy