remix-run · ryanflorence · Jan 30, 2022 · Jan 27, 2022 · Jan 27, 2022 · Jan 27, 2022
diff --git a/contributors.yml b/contributors.yml
@@ -58,6 +58,7 @@
 - GregBrimble
 - hardingmatt
 - HenryVogt
+- himorishige
 - hkan
 - Holben888
 - hollandThomas

diff --git a/examples/remix-auth-auth0/.env.example b/examples/remix-auth-auth0/.env.example
@@ -0,0 +1,7 @@
+AUTH0_RETURN_TO_URL=http://localhost:3000
+AUTH0_CALLBACK_URL=http://localhost:3000/callback
+AUTH0_CLIENT_ID=clientID
+AUTH0_CLIENT_SECRET=clientSecret
+AUTH0_DOMAIN=******.**.auth0.com
+AUTH0_LOGOUT_URL=https://******.**.auth0.com/v2/logout
+SECRETS=foobar
diff --git a/examples/remix-auth-auth0/.gitignore b/examples/remix-auth-auth0/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+
+/.cache
+/build
+/public/build
+
+.env
diff --git a/examples/remix-auth-auth0/README.md b/examples/remix-auth-auth0/README.md
@@ -0,0 +1,23 @@
+# Remix Auth - Auth0Strategy
+
+Authentication using Remix Auth with the Auth0Strategy.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/remix-auth-auth0)
+
+## Example
+
+This is using Remix Auth and the remix-auth-auth0 packages.
+
+The / route renders a single Sign In with Auth0 button, after the submit it starts the login flow with Auth0.
+
+The /private routes redirects the user to / if it's not logged-in, or shows the user profile from Auth0 if it's logged-in
+
+## Related Links
+
+- [Remix Auth](https://github.com/sergiodxa/remix-auth)
+- [Remix Auth Auth0](https://github.com/danestves/remix-auth-auth0)
+- [Auth0](https://auth0.com/)
diff --git a/examples/remix-auth-auth0/app/constants/index.server.ts b/examples/remix-auth-auth0/app/constants/index.server.ts
@@ -0,0 +1,7 @@
+export const AUTH0_RETURN_TO_URL = process.env.AUTH0_RETURN_TO_URL!;
+export const AUTH0_CALLBACK_URL = process.env.AUTH0_CALLBACK_URL!;
+export const AUTH0_CLIENT_ID = process.env.AUTH0_CLIENT_ID!;
+export const AUTH0_CLIENT_SECRET = process.env.AUTH0_CLIENT_SECRET!;
+export const AUTH0_DOMAIN = process.env.AUTH0_DOMAIN!;
+export const AUTH0_LOGOUT_URL = process.env.AUTH0_LOGOUT_URL!;
+export const SECRETS = process.env.SECRETS!;
diff --git a/examples/remix-auth-auth0/app/entry.client.tsx b/examples/remix-auth-auth0/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/remix-auth-auth0/app/entry.server.tsx b/examples/remix-auth-auth0/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/remix-auth-auth0/app/root.tsx b/examples/remix-auth-auth0/app/root.tsx
@@ -0,0 +1,27 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "remix";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/remix-auth-auth0/app/routes/auth0.tsx b/examples/remix-auth-auth0/app/routes/auth0.tsx
@@ -0,0 +1,10 @@
+import type { ActionFunction, LoaderFunction } from "remix";
+import { redirect } from "remix";
+
+import { auth } from "~/utils/auth.server";
+
+export const loader: LoaderFunction = () => redirect("/");
+
+export const action: ActionFunction = ({ request }) => {
+  return auth.authenticate("auth0", request);
+};
diff --git a/examples/remix-auth-auth0/app/routes/callback.tsx b/examples/remix-auth-auth0/app/routes/callback.tsx
@@ -0,0 +1,10 @@
+import type { LoaderFunction } from "remix";
+
+import { auth } from "~/utils/auth.server";
+
+export const loader: LoaderFunction = ({ request }) => {
+  return auth.authenticate("auth0", request, {
+    successRedirect: "/private",
+    failureRedirect: "/"
+  });
+};
diff --git a/examples/remix-auth-auth0/app/routes/index.tsx b/examples/remix-auth-auth0/app/routes/index.tsx
@@ -0,0 +1,25 @@
+import type { LoaderFunction } from "remix";
+import { Form, json, useLoaderData } from "remix";
+import { auth, getSession } from "~/utils/auth.server";
+
+type LoaderData = {
+  error: { message: string } | null;
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  await auth.isAuthenticated(request, { successRedirect: "/private" });
+  const session = await getSession(request.headers.get("Cookie"));
+  const error = session.get(auth.sessionErrorKey) as LoaderData["error"];
+  return json<LoaderData>({ error });
+};
+
+export default function Screen() {
+  const { error } = useLoaderData<LoaderData>();
+
+  return (
+    <Form method="post" action="/auth0">
+      {error && <div>{error.message}</div>}
+      <button>Sign In with Auth0</button>
+    </Form>
+  );
+}
diff --git a/examples/remix-auth-auth0/app/routes/logout.tsx b/examples/remix-auth-auth0/app/routes/logout.tsx
@@ -0,0 +1,22 @@
+import type { ActionFunction } from "remix";
+import { redirect } from "remix";
+import { destroySession, getSession } from "~/utils/auth.server";
+import {
+  AUTH0_CLIENT_ID,
+  AUTH0_LOGOUT_URL,
+  AUTH0_RETURN_TO_URL
+} from "~/constants/index.server";
+
+export const action: ActionFunction = async ({ request }) => {
+  const session = await getSession(request.headers.get("Cookie"));
+  const logoutURL = new URL(AUTH0_LOGOUT_URL);
+
+  logoutURL.searchParams.set("client_id", AUTH0_CLIENT_ID);
+  logoutURL.searchParams.set("returnTo", AUTH0_RETURN_TO_URL);
+
+  return redirect(logoutURL.toString(), {
+    headers: {
+      "Set-Cookie": await destroySession(session)
+    }
+  });
+};
diff --git a/examples/remix-auth-auth0/app/routes/private.tsx b/examples/remix-auth-auth0/app/routes/private.tsx
@@ -0,0 +1,31 @@
+import type { LoaderFunction } from "remix";
+import { Form, json, useLoaderData } from "remix";
+import type { Auth0Profile } from "remix-auth-auth0";
+import { auth } from "~/utils/auth.server";
+
+type LoaderData = { profile: Auth0Profile };
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const profile = await auth.isAuthenticated(request, {
+    failureRedirect: "/"
+  });
+
+  return json<LoaderData>({ profile });
+};
+
+export default function Screen() {
+  const { profile } = useLoaderData<LoaderData>();
+  return (
+    <>
+      <Form method="post" action="/logout">
+        <button>Log Out</button>
+      </Form>
+
+      <hr />
+
+      <pre>
+        <code>{JSON.stringify(profile, null, 2)}</code>
+      </pre>
+    </>
+  );
+}
diff --git a/examples/remix-auth-auth0/app/utils/auth.server.ts b/examples/remix-auth-auth0/app/utils/auth.server.ts
@@ -0,0 +1,43 @@
+import { Authenticator } from "remix-auth";
+import { Auth0Strategy } from "remix-auth-auth0";
+import { createCookieSessionStorage } from "remix";
+import type { Auth0Profile } from "remix-auth-auth0";
+import {
+  AUTH0_CALLBACK_URL,
+  AUTH0_CLIENT_ID,
+  AUTH0_CLIENT_SECRET,
+  AUTH0_DOMAIN,
+  SECRETS
+} from "~/constants/index.server";
+
+const sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: "_remix_session",
+    sameSite: "lax",
+    path: "/",
+    httpOnly: true,
+    secrets: [SECRETS],
+    secure: process.env.NODE_ENV === "production"
+  }
+});
+
+export const auth = new Authenticator<Auth0Profile>(sessionStorage);
+
+const auth0Strategy = new Auth0Strategy(
+  {
+    callbackURL: AUTH0_CALLBACK_URL,
+    clientID: AUTH0_CLIENT_ID,
+    clientSecret: AUTH0_CLIENT_SECRET,
+    domain: AUTH0_DOMAIN
+  },
+  async ({ profile }) => {
+    //
+    // Use the returned information to process or write to the DB.
+    //
+    return profile;
+  }
+);
+
+auth.use(auth0Strategy);
+
+export const { getSession, commitSession, destroySession } = sessionStorage;