Remix Authentication with Amazon Cognito

COGNITO_USER_POOL_URL="https://samlindstrom.auth.us-west-2.amazoncognito.com"
COGNITO_APP_CLIENT_ID="<INSERT YOUR ID>"
COGNITO_APP_CLIENT_SECRET="<INSERT YOUR SECRET>"
COGNITO_APP_CLIENT_CALLBACK_URL="http://localhost:3000/auth/callback"

COGNITO_APP_CLIENT_CALLBACK_URL = process.env.NODE_ENV === "production" ? `${<YOUR PROD DOMAIN>}/auth/callback` : "http://localhost:3000/auth/callback"

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

// create the cookie-based session storage and export it
export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session", // Cookie Name: any name will do here
    sameSite: "lax", // Helps with CSRF protection 
    path: "/", // Remember to add this so the cookie will be available on all routes
    httpOnly: true, // For security reasons, make this cookie http only so that it's inaccessible to JavaScript
    secrets: ["secret-value"], // Replace this with an actual strong secret
    secure: process.env.NODE_ENV === "production", // enable this in prod only
  },
});

// Export session methods for use in other parts of the application
export const { getSession, commitSession, destroySession } = sessionStorage;

// app/auth.server.ts

import { redirect } from "@remix-run/node";
import type { JwtPayload } from "jwt-decode";
import jwtDecode from "jwt-decode";
import { Authenticator } from "remix-auth";
import { OAuth2Strategy } from "remix-auth-oauth2";

import { sessionStorage } from "../session.server";

const {
  COGNITO_APP_CLIENT_CALLBACK_URL,
  COGNITO_USER_POOL_URL,
  COGNITO_APP_CLIENT_ID = "",
  COGNITO_APP_CLIENT_SECRET = "",
} = process.env;

// Define the type for authenticated user data
type AuthenticatedUser = {
  accessToken: string;
  tokenExpiry?: number;
  name?: string;
  email?: string;
  email_verified?: string;
};

// Define the type for user info retrieved from Cognito
// Derived from https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html
type UserInfo = {
  email: string;
  email_verified: string;
  family_name: string;
  given_name: string;
  identities: unknown[];
  name: string;
  preferred_username: string;
  sub: string;
  username: string;
};

// Define the type for decoded JWT token
interface DecodedToken extends JwtPayload {
  auth_time: number;
  username: string;
}

// Initialize the authenticator with session storage
export const authenticator = new Authenticator<AuthenticatedUser>(
  sessionStorage
);

// Configure OAuth2 strategy with Cognito details
const OAuthStrategy = new OAuth2Strategy(
  {
    clientID: COGNITO_APP_CLIENT_ID,
    clientSecret: COGNITO_APP_CLIENT_SECRET,
    callbackURL: COGNITO_APP_CLIENT_CALLBACK_URL || "",
    authorizationURL: `${COGNITO_USER_POOL_URL}/oauth2/authorize`, // Read https://docs.aws.amazon.com/cognito/latest/developerguide/token-endpoint.html
    tokenURL: `${COGNITO_USER_POOL_URL}/oauth2/token`, // Cognito token endpoint
    useBasicAuthenticationHeader: false, // defaults to false
  },
  async ({ accessToken }): Promise<AuthenticatedUser> => {
    // Decode the JWT token to get user details
    const decoded = jwtDecode<DecodedToken>(accessToken);

    // Fetch user info from cognito and include in authenticator response
    // https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html
    let response;
    try {
      response = await fetch(`${COGNITO_USER_POOL_URL}/oauth2/userInfo`, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          ContentType: "application/json",
        },
        method: "GET",
      });
    } catch (e) {
      console.error("There was a problem fetching user info: ", e);
    }

    const info = response ? ((await response.json()) as UserInfo) : null;

    // Return authenticated user details
    return {
      accessToken,
      tokenExpiry: decoded.exp,
      name: info?.name,
      email: info?.email,
      email_verified: info?.email_verified,
    };
  }
);

// app/routes/auth.logout.ts

import type { ActionFunction, LoaderFunction } from '@remix-run/node';
import { redirect } from '@remix-run/node';

import { destroySession, getSession } from '../session.server';

const {
  COGNITO_APP_CLIENT_ID = '',
  COGNITO_USER_POOL_URL
} = process.env;

// Distinguish between dev and prod envs for your applications url
const clientURL = process.env.NODE_ENV === "production" ? <YOUR_APP_DOMAIN> : "http://localhost:3000"

const handleLogout = async (request: Request) => {
  // Get the current session
  const session = await getSession(request.headers.get('Cookie'));

  const cognitoLogoutUrl = new URL(`${COGNITO_USER_POOL_URL}/logout`);

  // Set required parameters for Cognito logout URL
  // These values should correspond with configured settings in your app client
  cognitoLogoutUrl.searchParams.set(
    'client_id',
    COGNITO_APP_CLIENT_ID
  );
  cognitoLogoutUrl.searchParams.set(
    'logout_uri',
    `${clientURL}/auth/logout`
  );
  cognitoLogoutUrl.searchParams.set('response_type', 'code');

  // Redirect to Cognito logout URL and destroy session
  return redirect(cognitoLogoutUrl.toString(), {
    headers: {
      'Set-Cookie': await destroySession(session)
    }
  });
};

// Define loader and action functions for handling logout
export const loader: LoaderFunction = async ({ request }) => {
  return await handleLogout(request);
};

export const action: ActionFunction = async ({ request }) => {
  return await handleLogout(request);
};

import { Link } from '@remix-run/react';

...

<Link to="/auth/logout">
  <button>Logout</button>
</Link>

// app/routes/auth.callback.ts

import type { LoaderFunction } from "@remix-run/node";
import { redirect } from "@remix-run/node";

import { authenticator } from "../auth.server";
import { commitSession, getSession } from "../session.server";

export const loader: LoaderFunction = async ({ request }) => {
  const user = await authenticator.authenticate("oauth2", request);

  // Manually get the current session
  const session = await getSession(request.headers.get("Cookie"));

  // Store authenticated user details in session
  session.set(authenticator.sessionKey as "user", user);

  const headers = new Headers({ "Set-Cookie": await commitSession(session) });

  // Redirect to the application root with updated session
  return redirect("/", { headers });
};

import { Link } from "@remix-run/react";

import { routes } from "~/routes";

export default function LogoutPage() {
  return (
    <div>
      <h1>You have successfully logged out</h1>
      <Link to={routes.root()}>Go Home</Link>
    </div>
  );
}

// app/root.tsx

import { json, type LoaderArgs } from '@remix-run/node';
import { authenticator, checkTokenExpiry } from './auth.server';

...

export const loader = async ({ request }: LoaderArgs) => {
  const user = await authenticator.authenticate('oauth2', request);

  // Return authenticated user details as JSON
  return json({
    user
  });
};