{user.name}
-- {user.email} -
- -
- You can protect a client-side rendered page by wrapping it with withPageAuthRequired. Only
- logged in users will be able to access it. If the user is logged out, they will be redirected to the login
- page instead.
-
- Use the useUser hook to access the user profile from protected client-side rendered pages. The{' '}
- useUser hook relies on the UserProvider Context Provider, so you need to wrap your
- custom App Component with it.
-
- You can also fetch the user profile by calling the /api/auth/me API route.
-
Ping an external API by clicking the button below
-
- This will call a local API on port 3001 that would have been started if you run npm run dev.
-
- An access token is sent as part of the request's Authorization header and the API will validate
- it using the API's audience value. The audience is the identifier of the API that you want to call (see{' '}
-
- API Authorization Settings
- {' '}
- for more info).
-
- {user.email} -
- -
- You can protect a server-side rendered page by wrapping it with withPageAuthRequired. Only
- logged in users will be able to access it. If the user is logged out, they will be redirected to the login
- page instead.{' '}
-
{col.description}
- - ))} -- This is a sample application that demonstrates an authentication flow for a Regular Web App, using{' '} - Next.js -
-
-
- {children}
-
-
- );
-};
-
-export default Highlight;
diff --git a/Sample-01/components/Layout.jsx b/Sample-01/components/Layout.jsx
deleted file mode 100644
index 17e4dde..0000000
--- a/Sample-01/components/Layout.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { Container } from 'reactstrap';
-import Head from 'next/head';
-
-import NavBar from './NavBar';
-import Footer from './Footer';
-
-const Layout = ({ children }) => (
- <>
-
-
-
- + This page demonstrates how to use Auth0 access tokens to call protected APIs. + You can access this page whether you are logged in or not, but the API calls + will only work if you're authenticated. +
+ + {!session && ( ++ Note: You are not currently logged in. API calls will fail without authentication. + Log in +
+
+ When authenticated, calling API routes in this application automatically includes your session
+ information. For external APIs, you'll need to explicitly request an access token using the
+ getAccessToken() function from the Auth0 SDK.
+
+ The token is automatically refreshed if needed and is stored securely in an HTTP-only cookie. +
+ +Processing your authentication...
+You are being redirected to the Auth0 login page...
+You are being logged out...
++ Click the buttons below to test API calls. The first button calls a protected API route in this + application. The second button demonstrates acquiring an access token for external API calls. +
+ +{error}
+{JSON.stringify(apiData, null, 2)}
+ + This demonstrates how to call external APIs with your Auth0 access token. + For demonstration purposes, we're using a proxy endpoint to avoid CORS issues. +
+ ++ Enter a URL like https://jsonplaceholder.typicode.com/posts/1 +
+{apiResponse.error}
+
+ {JSON.stringify(apiResponse.data, null, 2)}
+
+ Loading user access information...
+{userAccess.error}
++ To use role-based access control, your Auth0 account needs to be set up with: +
++ This component demonstrates how to implement role-based access control (RBAC) + with Auth0. Below you can see your assigned roles and permissions. +
+ +You don't have any assigned roles.
+ )} +| Resource | +Action | +Description | +
|---|---|---|
| {permission.resource || '-'} | +{permission.action || '-'} | +{permission.description || '-'} | +
+ To implement access control in your application: +
+You must be logged in to view this page.
+{session.user.email}
+Name: {session.user.name || 'Not provided'}
+Email: {session.user.email || 'Not provided'}
+Email Verified: {session.user.email_verified ? 'Yes' : 'No'}
+User ID: {session.user.sub}
+{JSON.stringify(session.user, null, 2)}
+ + This page demonstrates how to implement role-based access control (RBAC) with Auth0. + RBAC allows you to assign permissions to users based on their roles, and then + control what they can access in your application. +
+ + {!session && ( ++ Note: You must be logged in to view role and permission information. + Log in +
++ To implement RBAC in your own application: +
+
+{`// Protecting a component with RBAC
+function ProtectedComponent({ user, children }) {
+ // Check if user has required role
+ const hasAdminRole = user?.roles?.includes('admin');
+
+ if (!hasAdminRole) {
+ return You don't have permission to view this content.
;
+ }
+
+ return <>{children};
+}`}
+
+
+
+{`// Protecting an API route with RBAC
+export async function GET(request) {
+ const session = await auth0.getSession();
+
+ if (!session) {
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ }
+
+ const token = await auth0.getAccessToken();
+ const permissions = token.claims['https://your-domain.com/permissions'] || [];
+
+ // Check if user has the required permission
+ if (!permissions.includes('read:protected-data')) {
+ return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+ }
+
+ // User has permission, return protected data
+ return NextResponse.json({ data: 'Protected data' });
+}`}
+
+