add auth example

fernandobandeira · May 31, 2021 · 29c30c1 · 29c30c1 · vercel · May 31, 2021
1 parent 57268fc
commit 29c30c1
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 210 deletions.
diff --git a/lib/auth.tsx b/lib/auth.tsx
@@ -0,0 +1,9 @@
+// mock login and logout
+export function login() {
+  // add cookie
+  document.cookie = "authorization=swr;";
+}
+export function logout() {
+  // delete cookie
+  document.cookie = "authorization=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+}
diff --git a/lib/useUser.tsx b/lib/useUser.tsx
@@ -0,0 +1,37 @@
+import useSWR from "swr";
+import { logout } from "./auth";
+
+type User = {
+  name: string;
+};
+
+// mock the user api
+const userFetcher = async (): Promise<User | null> => {
+  // sleep 500
+  await new Promise((res) => setTimeout(res, 500));
+
+  if (document.cookie.includes("authorization=swr")) {
+    // authorized
+    return {
+      name: "Fernando",
+    };
+  }
+
+  // not authorized
+  logout();
+  throw new Error("not authorized");
+};
+
+export default function useUser() {
+  const { data, mutate, error } = useSWR("api_user", userFetcher);
+
+  const loading = !data && !error;
+  const loggedOut = !!error;
+
+  return {
+    loading,
+    loggedOut,
+    user: data,
+    mutate,
+  };
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,6 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
-export default MyApp
+export default MyApp;
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import Router from "next/router";
+import Head from "next/head";
+
+import useUser from "../lib/useUser";
+import { login } from "../lib/auth";
+
+export default function App() {
+  const { user, mutate } = useUser();
+
+  // if logged in, redirect to the protected route
+  useEffect(() => {
+    if (user) {
+      Router.replace("/protected");
+    }
+  }, [user]);
+
+  return (
+    <>
+      <Head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+          if (document.cookie && document.cookie.indexOf('authorization=') > -1) {
+            location.replace('/protected')
+          }`,
+          }}
+        />
+      </Head>
+      <div className="homepage">
+        <main>
+          <h1>ACME!</h1>
+          <p>Build Something Brilliant</p>
+          <br />
+          <button
+            onClick={() => {
+              login();
+              mutate(); // after logging in, we revalidate the SWR
+            }}
+          >
+            Login To Continue
+          </button>
+        </main>
+      </div>
+    </>
+  );
+}
diff --git a/pages/protected.tsx b/pages/protected.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import Head from "next/head";
+import Router from "next/router";
+
+import useUser from "../lib/useUser";
+import { logout } from "../lib/auth";
+
+export default function Dashboard() {
+  const { user, loading, loggedOut, mutate } = useUser();
+
+  // if logged out, redirect to the homepage
+  useEffect(() => {
+    if (loggedOut) {
+      Router.replace("/login");
+    }
+  }, [loggedOut]);
+  if (loggedOut) return "redirecting...";
+
+  return (
+    <div>
+      <main>
+        <Head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+          if (!document.cookie || document.cookie.indexOf('authorization=') === -1) {
+            location.replace('/login')
+          }`,
+            }}
+          />
+        </Head>
+        {loading || !user ? (
+          "loading..."
+        ) : (
+          <>
+            <h1>Welcome, {user.name}</h1>
+            <p>This is your dashboard.</p>
+            <button
+              onClick={() => {
+                logout();
+                mutate(null); // optimistically update the data and revalidate
+                Router.replace("/login");
+              }}
+            >
+              Logout
+            </button>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
diff --git a/styles/globals.css b/styles/globals.css