Package Exports

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

Readme

Apple Strategy

Strategy that uses Apples Sign In with Apple.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Setup your secrets

To be able to use "Sign In with Apple" you need to setup some credentials with Apple. Heres a Blog Post from Okta which explains in detail how to get the secrets.

Generating a Client Secret

By default, Apple only provides you with a private key from which you can generate a Client Secret. You can then provide that generated secret to the strategy.

Heres a simple JavaScript example on how you can create the secret:

const jwt = require("jsonwebtoken");
const fs = require("fs");

const serviceId = "SERVICE_ID"; // the Service ID you created
const teamId = "TEAM_ID"; // your Apple Developer Team ID, look in the top right corner of the Developer Portal
const keyId = "KEY_ID"; // the KEY ID of your generated private key
const privateKey = fs.readFileSync("./key.p8");
const secret = jwt.sign(
  {
    iss: teamId,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 86400 * 180, // 6 months
    aud: "https://appleid.apple.com",
    sub: serviceId,
  },
  privateKey,
  { algorithm: "ES256", keyid: keyId }
);
console.log(secret);

Caveats with the current Stragegy

There is one main caveats with this Strategy currently. Since Apple only provides scope information (username and email) with the form_post respond parameter which is incompatible with the OAuth 2.0 strategy we currently don't support any of the scopes ("email" of "name").

Create your session storage

// app/session.server.ts
import { createCookieSessionStorage } from "remix";

export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session",
    sameSite: "lax",
    path: "/",
    httpOnly: true,
    secrets: ["s3cr3t"],
    secure: process.env.NODE_ENV === "production",
  },
});

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

Create an instance of the Authenticator

// app/auth.server.ts
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/session.server";
import { User } from "~/models/user";

// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export let authenticator = new Authenticator<User>(sessionStorage);

Create an instance of the AppleStrategy and pass it the authenticator

import { AppleStrategy } from "remix-auth";
import { decode } from "jsonwebtoken";

let appleStrategy = new AppleStrategy(
  {
    clientID: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    callbackURL: "/auth/apple/callback",
  },
  async (accessToken, refreshToken, extraParams) => {
    let profileData = decode(extraParams.id_token);
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ sub: profileData.sub });
  }
);

authenticator.use(appleStrategy);

Setup your routes

// app/routes/auth.apple.tsx
import { LoaderFunction } from "remix";
import { authenticator } from "~/auth.server";

export let loader: LoaderFunction = async ({ request }) => {
  await authenticator.authenticate("apple", request);
};

// app/routes/auth.apple.callback.tsx
import type { LoaderFunction } from "remix";
import { authenticator } from "~/utils/auth.server";

export const loader: LoaderFunction = async ({ request }) => {
  return authenticator.authenticate("apple", request, {
    failureRedirect: "/error",
    successRedirect: "/dashboard",
  });
};

// app/routes/dashboard.tsx
import { LoaderFunction, redirect } from "remix";
import { json } from "remix-utils";
import { authenticator } from ".~/auth.server";
import { User } from ".~/models/user";

type LoaderData = { user: User };

export let loader: LoaderFunction = async ({ request }) => {
  let user = await authenticator.isAuthenticated(request, {
    redirectTo: "/login",
  });
  return json<LoaderData>({ user });
};

// Empty React component required by Remix
export default function Dashboard() {
  let { user } = useRouteData<LoaderData>();
  // use the user to render the UI of your private route
}