implement user authentication with auth0

Author: byron-okta

NOTICE

@@ -1,45 +1,11 @@
-# React/JavaScript: Starter SPA Code Sample
+# React/JavaScript: Basic User Authentication Code Sample
 
-This JavaScript code sample demonstrates how to build a Single-Page Application (SPA) using React. This React code sample builds the API server using the React Router 6 library.
+This JavaScript code sample demonstrates **how to implement user authentication** in React applications using Auth0. This React code sample builds the Single-Page Application (SPA) using the React Router 6 library.
 
-Visit the ["React/JavaScript Code Samples: SPA Security in Action"](https://developer.auth0.com/resources/code-samples/spa/react) section of the ["Auth0 Developer Resources"](https://developer.auth0.com/resources) to explore how you can secure React applications written in JavaScript by implementing endpoint protection and authorization with Auth0.
+This code sample is part of the ["Auth0 Developer Resources"](https://developer.auth0.com/resources), a place where you can explore the authentication and authorization features of the Auth0 Identity Platform.
 
-[![React/JavaScript Code Samples: SPA Security in Action](https://cdn.auth0.com/blog/hub/code-samples/spa/react-javascript.png)](https://developer.auth0.com/resources/code-samples/spa/react)
+Visit the ["React/JavaScript + React Router 6 Code Sample: User Authentication For Basic Apps"](https://developer.auth0.com/resources/code-samples/spa/react/basic-authentication) page for instructions on how to configure and run this code sample and how to integrate it with an API server of your choice to [create a full-stack code sample](https://developer.auth0.com/resources/code-samples/full-stack/hello-world/basic-access-control/spa).
 
 ## Why Use Auth0?
 
 Auth0 is a flexible drop-in solution to add authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that come with building your own solution to authenticate and authorize users. We offer tons of guidance and SDKs for you to get started and [integrate Auth0 into your stack easily](https://developer.auth0.com/resources/code-samples/full-stack).
-
-## Set Up and Run the React Project
-
-Install the project dependencies:
-
-```bash
-npm install
-```
-
-The starter React project offers a functional application that consumes data from an external API to hydrate the user interface. For simplicity and convenience, the starter project simulates the external API locally using [`json-server`](https://github.com/typicode/json-server).
-
-However, you can also integrate this starter project with any of the ["Hello World" API code samples, which are available in multiple backend frameworks and programming languages](https://github.com/orgs/auth0-developer-hub/repositories?language=&q=api+hello-world&sort=&type=public).
-
-The compatible API server runs on `http://localhost:6060` by default. As such, to connect your React application with that API server, create a `.env` file under the root project directory and populate it with the following environment variables:
-
-```bash
-REACT_APP_API_SERVER_URL=http://localhost:6060
-```
-
-Next, execute the following command to run the JSON server API:
-
-```bash
-npm run api
-```
-
-Finally, open another terminal tab and execute this command to run your React application:
-
-```bash
-npm start
-```
-
-Visit [`http://localhost:4040/`](http://localhost:4040/) to access the starter application.
-
-In the starter project, all the starter React application routes are public. However, you can use Auth0 to get an ID token to hydrate the user profile information present on the `/profile` page with information from a real user. With Auth0, you can also get an access token to make a secure call to an external API to hydrate the messages present in the `/protected` and `/admin` pages.

README.md

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.0.0",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -46,4 +47,3 @@
     "prettier": "^2.7.1"
   }
 }
-

package-lock.json

@@ -1,20 +1,44 @@
+import { useAuth0 } from "@auth0/auth0-react";
 import React from "react";
 import { Route, Routes } from "react-router-dom";
+import { PageLoader } from "./components/page-loader";
+import { AuthenticationGuard } from "./components/authentication-guard";
 import { AdminPage } from "./pages/admin-page";
+import { CallbackPage } from "./pages/callback-page";
 import { HomePage } from "./pages/home-page";
 import { NotFoundPage } from "./pages/not-found-page";
 import { ProfilePage } from "./pages/profile-page";
 import { ProtectedPage } from "./pages/protected-page";
 import { PublicPage } from "./pages/public-page";
 
 export const App = () => {
+  const { isLoading } = useAuth0();
+
+  if (isLoading) {
+    return (
+      <div className="page-layout">
+        <PageLoader />
+      </div>
+    );
+  }
+
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
-      <Route path="/profile" element={<ProfilePage />} />
+      <Route
+        path="/profile"
+        element={<AuthenticationGuard component={ProfilePage} />}
+      />
       <Route path="/public" element={<PublicPage />} />
-      <Route path="/protected" element={<ProtectedPage />} />
-      <Route path="/admin" element={<AdminPage />} />
+      <Route
+        path="/protected"
+        element={<AuthenticationGuard component={ProtectedPage} />}
+      />
+      <Route
+        path="/admin"
+        element={<AuthenticationGuard component={AdminPage} />}
+      />
+      <Route path="/callback" element={<CallbackPage />} />
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
   );

package.json

@@ -0,0 +1,32 @@
+import { Auth0Provider } from "@auth0/auth0-react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Auth0ProviderWithNavigate = ({ children }) => {
+  const navigate = useNavigate();
+
+  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+  const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;
+
+  const onRedirectCallback = (appState) => {
+    navigate(appState?.returnTo || window.location.pathname);
+  };
+
+  if (!(domain && clientId && redirectUri)) {
+    return null;
+  }
+
+  return (
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      authorizationParams={{
+        redirect_uri: redirectUri,
+      }}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};

src/app.js

@@ -0,0 +1,15 @@
+import { withAuthenticationRequired } from "@auth0/auth0-react";
+import React from "react";
+import { PageLoader } from "./page-loader";
+
+export const AuthenticationGuard = ({ component }) => {
+  const Component = withAuthenticationRequired(component, {
+    onRedirecting: () => (
+      <div className="page-layout">
+        <PageLoader />
+      </div>
+    ),
+  });
+
+  return <Component />;
+};

src/auth0-provider-with-navigate.js

@@ -0,0 +1,23 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+export const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  const handleLogin = async () => {
+    await loginWithRedirect({
+      appState: {
+        returnTo: "/profile",
+      },
+      authorizationParams: {
+        prompt: "login",
+      },
+    });
+  };
+
+  return (
+    <button className="button__login" onClick={handleLogin}>
+      Log In
+    </button>
+  );
+};

src/components/authentication-guard.js

@@ -0,0 +1,20 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+export const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  const handleLogout = () => {
+    logout({
+      logoutParams: {
+        returnTo: window.location.origin,
+      },
+    });
+  };
+
+  return (
+    <button className="button__logout" onClick={handleLogout}>
+      Log Out
+    </button>
+  );
+};

src/components/buttons/login-button.js

@@ -0,0 +1,24 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import React from "react";
+
+export const SignupButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  const handleSignUp = async () => {
+    await loginWithRedirect({
+      appState: {
+        returnTo: "/profile",
+      },
+      authorizationParams: {
+        prompt: "login",
+        screen_hint: "signup",
+      },
+    });
+  };
+
+  return (
+    <button className="button__sign-up" onClick={handleSignUp}>
+      Sign Up
+    </button>
+  );
+};