implement user authentication with auth0

Author: byron-okta

NOTICE

@@ -1,23 +1,11 @@
-# Next.js/JavaScript: Starter Web App Code Sample
+# Next.js/JavaScript: Basic User Authentication Code Sample
 
-This JavaScript code sample demonstrates how to build web applications using Next.js and React. This Next.js code sample uses the App Router.
+This JavaScript code sample demonstrates **how to implement user authentication** in Next.js web applications using Auth0.
 
-Visit the ["Next.js/JavaScript Code Samples: App Security in Action"](https://developer.auth0.com/resources/code-samples/web-app/nextjs-javascript) section of the ["Auth0 Developer Resources"](https://developer.auth0.com/resources) to explore how you can secure Next.js applications written in JavaScript by implementing user authentication 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.
+
+Visit the ["Next.js/JavaScript Code Sample: User Authentication For Basic Apps"](https://developer.auth0.com/resources/code-samples/web-app/nextjs/basic-authentication) page for instructions on how to configure and run this code sample and how to integrate it with an external API server of your choice.
 
 ## 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 Next.js Project
-
-Install the project dependencies:
-
-```bash
-npm install
-```
-
-Execute this command to run your Next.js application in development:
-
-```bash
-npm run dev
-```

README.md

@@ -0,0 +1,17 @@
+import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";
+
+export const GET = handleAuth({
+  login: handleLogin({
+    authorizationParams: {
+      prompt: "login",
+    },
+    returnTo: "/profile",
+  }),
+  signup: handleLogin({
+    authorizationParams: {
+      prompt: "login",
+      screen_hint: "signup",
+    },
+    returnTo: "/profile",
+  }),
+});

app/api/auth/[auth0]/route.js

@@ -1,9 +1,12 @@
+import { withApiAuthRequired } from "@auth0/nextjs-auth0";
 import { NextResponse } from "next/server";
 
-export async function GET() {
+const GET = withApiAuthRequired(async () => {
   const message = {
     text: "This is an admin message.",
   };
 
   return NextResponse.json(message);
-}
+});
+
+export { GET };

app/api/messages/admin/route.js

@@ -1,9 +1,12 @@
+import { withApiAuthRequired } from "@auth0/nextjs-auth0";
 import { NextResponse } from "next/server";
 
-export async function GET() {
+const GET = withApiAuthRequired(async () => {
   const message = {
     text: "This is a protected message.",
   };
 
   return NextResponse.json(message);
-}
+});
+
+export { GET };

app/api/messages/protected/route.js

@@ -0,0 +1,7 @@
+export const LoginButton = () => {
+  return (
+    <a className="button__login" href="/api/auth/login">
+      Log In
+    </a>
+  );
+};

app/components/buttons/login-button.js

@@ -0,0 +1,7 @@
+export const LogoutButton = () => {
+  return (
+    <a className="button__logout" href="/api/auth/logout">
+      Log Out
+    </a>
+  );
+};

app/components/buttons/logout-button.js

@@ -0,0 +1,7 @@
+export const SignupButton = () => {
+  return (
+    <a className="button__sign-up" href="/api/auth/signup">
+      Sign Up
+    </a>
+  );
+};

app/components/buttons/signup-button.js

@@ -1,3 +1,26 @@
+"use client";
+
+import { useUser } from "@auth0/nextjs-auth0/client";
+import { LoginButton } from "../../buttons/login-button";
+import { LogoutButton } from "../../buttons/logout-button";
+import { SignupButton } from "../../buttons/signup-button";
+
 export const NavBarButtons = () => {
-  return <div />;
+  const { user } = useUser();
+
+  return (
+    <div className="nav-bar__buttons">
+      {!user && (
+        <>
+          <SignupButton />
+          <LoginButton />
+        </>
+      )}
+      {user && (
+        <>
+          <LogoutButton />
+        </>
+      )}
+    </div>
+  );
 };

app/components/navigation/desktop/nav-bar-buttons.js

@@ -1,12 +1,21 @@
+"use client";
+
+import { useUser } from "@auth0/nextjs-auth0/client";
 import { NavBarTab } from "./nav-bar-tab";
 
 export const NavBarTabs = () => {
+  const { user } = useUser();
+
   return (
     <div className="nav-bar__tabs">
       <NavBarTab path="/profile" label="Profile" />
       <NavBarTab path="/public" label="Public" />
-      <NavBarTab path="/protected" label="Protected" />
-      <NavBarTab path="/admin" label="Admin" />
+      {user && (
+        <>
+          <NavBarTab path="/protected" label="Protected" />
+          <NavBarTab path="/admin" label="Admin" />
+        </>
+      )}
     </div>
   );
 };