Merge pull request #97 from thefrontside/feat/auth0-example

feat: auth0 service examples

Author: jbolda

.changes/auth0-examples-with-auth0-react.md

@@ -0,0 +1,5 @@
+---
+"@simulacrum-examples/nextjs-with-auth0-react": minor
+---
+
+Add example using nextjs and auth0-react making use of the auth0 simulator.

.changes/auth0-examples-with-nextjs-auth0.md

@@ -0,0 +1,5 @@
+---
+"@simulacrum-examples/nextjs-with-nextjs-auth0": patch
+---
+
+Add example using nextjs and nextjs-auth0 making use of the auth0 simulator.

.changes/config.json

@@ -26,6 +26,28 @@
       "path": "./packages/ui",
       "manager": "javascript",
       "dependencies": []
+    },
+    "@simulacrum-examples/nextjs-with-auth0-react": {
+      "path": "./examples/nextjs-with-auth0-react",
+      "manager": "javascript",
+      "dependencies": [
+        "@simulacrum/auth0",
+        "@simulacrum/server",
+        "@simulacrum/client"
+      ],
+      "publish": false,
+      "releaseTag": false
+    },
+    "@simulacrum-examples/nextjs-with-nextjs-auth0": {
+      "path": "./examples/nextjs-with-nextjs-auth0",
+      "manager": "javascript",
+      "dependencies": [
+        "@simulacrum/auth0",
+        "@simulacrum/server",
+        "@simulacrum/client"
+      ],
+      "publish": false,
+      "releaseTag": false
     }
   }
 }

README.md

@@ -32,7 +32,7 @@ is just connects over HTTP and so can be used from any language.
 
 To create a simulation in a simulacrum server with one of its
 available simulators. In this case, we'll assume that there is an
-`auth0` simualtor on the server that we can use to create a simulation.
+`auth0` simulator on the server that we can use to create a simulation.
 
 
 ``` javascript

examples/nextjs-with-auth0-react/.env.development

@@ -0,0 +1,16 @@
+# Anything prepended with NEXT_PUBLIC_ is available client side
+
+# A long, secret value used to encrypt the session cookie
+AUTH0_SECRET='6d0598f28f62a9aee14929ef46c7c8befdc0150d870ec462fa45629511fd2a46'
+# The base url of your application, the nextjs dev server
+NEXT_PUBLIC_AUTH0_BASE_URL='localhost:3000'
+# The url of your Auth0 tenant domain, we point at the simulacrum auth0 service
+NEXT_PUBLIC_AUTH0_ISSUER_BASE_URL='localhost:4400'
+# Your Auth0 application's Client ID
+NEXT_PUBLIC_AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
+# Your Auth0 application's Client Secret
+AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'
+# Audience
+NEXT_PUBLIC_AUTH0_AUDIENCE='https://your-audience/'
+# Scope
+NEXT_PUBLIC_AUTH0_SCOPE='read:users'

examples/nextjs-with-auth0-react/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/nextjs-with-auth0-react/README.md

@@ -0,0 +1,25 @@
+# Simulacrum Server with Auth0 Interfaced With Nextjs
+
+[![Edit remark-codesandbox demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/thefrontside/simulacrum/tree/v0/examples/nextjs_with_auth0-react)
+
+This uses the [auth0/auth0-react](https://github.com/auth0/auth0-react) package. It is setup using those instructions with the `domain` pointing at our simulacrum service instead of the Auth0 API. This greatly improves the experience around testing locally, and then changing an environment variable to test in "staging" or moving to "production".
+
+## Getting Started
+
+First, run the simulacrum server with the auth0 service. Note this example and lockfile use `npm@7`. It will start up the service and create a user for you to use to login.
+
+```bash
+npm run sim
+```
+
+In a separate terminal window, also run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+Click on the login link, and enter the information from the user created in your simulation. It is output in your console running the simulation.
+
+Now you are logged in!

examples/nextjs-with-auth0-react/components/header.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Link from "next/link";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const Header = (): React.ReactElement => {
+  let { user, loginWithRedirect, logout } = useAuth0();
+
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          {user ? (
+            <>
+              <li>
+                <button
+                  onClick={() => logout({ returnTo: window.location.origin })}
+                >
+                  Log out
+                </button>
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <button onClick={loginWithRedirect}>Login</button>
+              </li>
+            </>
+          )}
+        </ul>
+      </nav>
+
+      <style jsx>{`
+        header {
+          padding: 0.2rem;
+          color: #fff;
+          background-color: #333;
+        }
+        nav {
+          max-width: 42rem;
+          margin: 1.5rem auto;
+        }
+        ul {
+          display: flex;
+          list-style: none;
+          margin-left: 0;
+          padding-left: 0;
+        }
+        li {
+          margin-right: 1rem;
+        }
+        li:nth-child(3) {
+          margin-right: auto;
+        }
+        a {
+          color: #fff;
+          text-decoration: none;
+        }
+        button {
+          font-size: 1rem;
+          color: #fff;
+          cursor: pointer;
+          border: none;
+          background: none;
+        }
+      `}</style>
+    </header>
+  );
+};
+
+export default Header;

examples/nextjs-with-auth0-react/components/layout.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Head from "next/head";
+
+import Header from "./header";
+
+const Layout = ({
+  children,
+}: React.PropsWithChildren<unknown>): React.ReactElement => (
+  <>
+    <Head>
+      <title>Next.js with Auth0 Simulacrum Server</title>
+    </Head>
+
+    <Header />
+
+    <main>
+      <div className="container">{children}</div>
+    </main>
+
+    <style jsx>{`
+      .container {
+        max-width: 42rem;
+        margin: 1.5rem auto;
+      }
+    `}</style>
+    <style jsx global>{`
+      body {
+        margin: 0;
+        color: #333;
+        font-family: -apple-system, "Segoe UI";
+      }
+    `}</style>
+  </>
+);
+
+export default Layout;

examples/nextjs-with-auth0-react/next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

examples/nextjs-with-auth0-react/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};