Skip to content
Closed
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
8c347e9
feat: updated rwa exmaple and added bootstrap script
mustafadeel Nov 28, 2025
1ab48bc
feat: updated readme file with boostrap instructions
mustafadeel Nov 28, 2025
7e42de3
Merge branch 'main' into example_update
mustafadeel Nov 28, 2025
3a725be
feat(examples): fix linter
castrinho18 Nov 29, 2025
7b034ce
test(react): added integration test cases for idp hooks (#203)
rax7389 Dec 1, 2025
21dfc94
feat(examples): readme feedback
mustafadeel Dec 1, 2025
0d29707
test: added tests for core schemas (#238)
Ajeey Dec 1, 2025
ba86168
Merge branch 'main' into example_update
mustafadeel Dec 1, 2025
2cc8074
Merge remote-tracking branch 'origin/main' into beta-testing
grandmaester Dec 2, 2025
ee82b58
test(react): add tests to idp hooks (domains tab) (#241)
rax7389 Dec 2, 2025
12d478a
chore: Added Tests for React Hooks folder (#243)
grandmaester Dec 2, 2025
b243fa8
feat(examples): add check for my-org api in bootstrap
mustafadeel Dec 2, 2025
1318999
Chore: Tests for IDP componnents (#242)
grandmaester Dec 3, 2025
3de0b61
chore: Added Tests for MFA Components folder (#244)
grandmaester Dec 3, 2025
517b31d
feat(examples): fixed prettier issues
mustafadeel Dec 3, 2025
9a7410d
feat(examples): Add my-account flag and align readmes (#247)
castrinho18 Dec 3, 2025
a384c9f
feat(examples) Update and align examples and readme files (#233)
mustafadeel Dec 4, 2025
18acd0e
fix(react): store file value instead of name (#246)
NaveenChand755 Dec 4, 2025
0a3c92b
feat(examples): bootstrap script updates
mustafadeel Dec 5, 2025
39bbcba
feat(examples): updated bootstrap script
mustafadeel Dec 5, 2025
fce6470
feat(examples): updated readme
mustafadeel Dec 5, 2025
cb6d557
Merge branch 'main' into beta-testing
Ajeey Dec 7, 2025
3b35169
Merge remote-tracking branch 'origin/beta-testing' into example_update
Ajeey Dec 7, 2025
06c03d2
chore: updated error msg if client creation fails
Ajeey Dec 7, 2025
fe085bb
fix(examples): update lock file
NaveenChand755 Dec 8, 2025
3c97b7c
Merge pull request #3 from mustafadeel/example_update
Ajeey Dec 8, 2025
bd4ba9a
fix(examples): lint error fix
NaveenChand755 Dec 8, 2025
3442077
chore: adding tests for sso provisioning
grandmaester Dec 8, 2025
4ff6f72
Merge remote-tracking branch 'origin/main' into chore/sso-provisionin…
grandmaester Dec 8, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs-site/src/pages/MyOrgIntroduction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,6 @@ export default function MyOrgIntroduction() {
"update:my_org:identity_providers",
"delete:my_org:identity_providers",
"update:my_org:identity_providers_detach",
"read:my_org:identity_providers_domains",
"create:my_org:identity_providers_domains",
"delete:my_org:identity_providers_domains",
"read:my_org:domains",
Expand Down
8 changes: 6 additions & 2 deletions examples/next-rwa/.env.example
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ APP_BASE_URL='http://localhost:5173'
AUTH0_DOMAIN='https://your-domain.auth0.com'
AUTH0_CLIENT_ID='your-client-id'
AUTH0_CLIENT_SECRET='your-client-secret'
AUTH0_SCOPE='openid profile email offline_access read:my_org:configuration create:me:authentication_methods read:me:authentication_methods delete:me:authentication_methods update:me:authentication_methods read:me:factors read:my_org:identity_providers_provisioning create:my_org:identity_providers_provisioning delete:my_org:identity_providers_provisioning read:my_org:details update:my_org:details read:my_org:identity_providers create:my_org:identity_providers update:my_org:identity_providers delete:my_org:identity_providers update:my_org:identity_providers_detach create:my_org:identity_providers_domains delete:my_org:identity_providers_domains'

# Optional: API Authorization (uncomment if your application is API authorized)
# AUTH0_AUDIENCE='your_auth_api_identifier'
# Auth0 Configuration - Public and exposed to the Browser
NEXT_PUBLIC_AUTH0_DOMAIN='metcodermyorg.test-iamda-myorgapipocweek1.auth0c.com'

# Feature Flags - Public and exposed to the Browser
NEXT_PUBLIC_ENABLE_MY_ACCOUNT='false'
156 changes: 127 additions & 29 deletions examples/next-rwa/README.md
Original file line number Diff line number Diff line change
@@ -1,62 +1,160 @@
# Next.js RWA Example
# **Universal Components** demo for Next.js

A Next.js Regular Web App (RWA) example that demonstrates Auth0 authentication using proxy mode with Auth0 UI components.
A Next.js example that demonstrates Auth0 authentication using proxy mode along with Auth0 Universal Components demonstrating delegated administration.

## Features
## Jump to a section

- **Next.js 15** - Latest version of Next.js with App Router
- **Auth0 Authentication** - Server-side authentication using proxy mode
- **MFA Management** - Complete Multi-Factor Authentication management UI
- **TypeScript** - Full type safety
- **Tailwind CSS** - Modern styling
- **Internationalization** - Multi-language support
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- [Adding a Universal Component](#adding-a-universal-component-to-your-app)
- [Universal Component Docs (Component-Specific Requirements)](#universal-component-docs-component-specific-requirements)
- [Troubleshooting](#troubleshooting)

## Prerequisites

1. **Node.js v20 or later** is required to run the bootstrapping process.

We recommend using [`nvm`](https://github.com/nvm-sh/nvm) to manage node versions in your development environment. Click these links to [learn how to install nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script) or [how to use nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#usage) to make sure you're using Node 20+.

2. **[`pnpm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or a comparable package manager** installed in your development environment.

These instructions assume that you're using `pnpm`, which is automatically included as part of the Node.js installation from prerequisite 1.

3. **A new Auth0 tenant**.

**This is important!** Using a new Auth0 tenant for this sample application ensures you don't encounter any conflicts due to existing configuration in an existing tenant.

The tenant you create will be configured automatically by our bootstrapping command during the installation process. You can sign up for a free Auth0 account at [https://auth0.com/signup](https://auth0.com/signup?utm_source=github&utm_medium=thirdpartyutm_campaign=saastart). See [Create Tenants](https://auth0.com/docs/get-started/auth0-overview/create-tenants) in the Auth0 docs if you need help.

4. Continue with the **[Getting Started](#getting-started)** section.

## Getting Started

1. Clone the repository and navigate to this example:
1. **Clone the repository and navigate to its folder:**

```bash
cd examples/next-rwa
git clone https://github.com/auth0/auth0-ui-components
cd auth0-ui-components
```

2. Install dependencies:
2. **Build the components package and install dependencies:**

```bash
pnpm install
pnpm run build
```

3. **Navigate to the examples folder and install dependencies:**

```bash
cd examples/next-rwa
pnpm install
```

4. **Login to `auth0-cli` and execute the bootstrap script to setup your tenant:**

Below `cli` command opens up a login prompt in your browser to select relevant tenant and confirm permissions.

```bash
auth0 login --scopes "read:connection_profiles,create:connection_profiles,update:connection_profiles,read:user_attribute_profiles,create:user_attribute_profiles,update:user_attribute_profiles,read:client_grants,create:client_grants,update:client_grants,delete:client_grants,read:connections,create:connections,update:connections,create:organization_connections,create:organization_members,create:organization_member_roles,read:clients,create:clients,update:clients,read:client_keys,read:roles,create:roles,update:roles,read:resource_servers,create:resource_servers,update:resource_servers,update:tenant_settings"
```

For a private-cloud tenant, authenticate using client-id and secret. If required, create a Machine to Machine application on your tenant authorized for Management API with relevant scopes.

```bash
auth0 login --domain <tenant-domain> --client-id <client-id> --client-secret <client-secret>
```

3. Set up your Auth0 application:
- Create a new Regular Web Application in your Auth0 dashboard
- Configure the callback URLs, logout URLs, and web origins
- Note your Domain and Client ID
After successful login, verify your selected tenant is Active.

4. Create a `.env.local` file in the project root:
```bash
auth0 tenants list
```

> [!WARNING]
> The step below will modify your tenant configuration. Only execute this against a dev tenant.

Execute the bootstrap script with the domain of your tenant.

```env
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:5173'
AUTH0_DOMAIN='https://your-domain.auth0.com'
AUTH0_CLIENT_ID='your-client-id'
AUTH0_CLIENT_SECRET='your-client-secret'
AUTH0_SCOPE='openid profile email create:me:authentication_methods read:me:authentication_methods delete:me:authentication_methods update:me:authentication_methods read:me:factors'
```bash
pnpm run auth0:bootstrap <your tenant domain>
```

5. Run the development server:
This scripts configures your tenant. If required it will also ask you to create an org admin and set password that you can use to login to the demo.

5. **Run the development server:**
```bash
pnpm run dev
```

Open [http://localhost:5173](http://localhost:5173) to see the result.

## Auth0 Configuration
## Adding a Universal Component to your app

In this example, we have routes defined within the side-bar at `examples/next-rwa/src/components/navigation/side-bar.tsx`.

The Domains route is served by `examples/next-rwa/src/app/domain-management/page.tsx` which currently renders an empty page.

Edit this file to uncomment `<DomainTable />` and deleted the `<p>` entry and save. Final result should look like below.

```typescript
'use client';

import { DomainTable } from '@auth0/web-ui-components-react/rwa';

export default function OrgManagementPage() {
return (
<div className="p-6 pt-8 space-y-6">
<p>Follow Quickstart guidance on how to add Domain Management component.</p>
<DomainTable />
</div>
);
}
```

Navigate to `Domains` menu items to view the Domain Management Universal Component.

This example uses Auth0's Regular Web Application authentication flow with proxy mode. The Auth0 UI Components automatically detect the proxy configuration and use server-side authentication.
## Universal Component Docs (Component-Specific Requirements)

### Component-Specific Requirements
For detailed configuration options, props, troubleshooting, and component-specific requirements, please refer to the official component documentation:

**[Auth0 Universal Components Documentation](https://auth0-ui-components.vercel.app/getting-started)**

**Important**: Each component may have specific Auth0 configuration requirements. Before using any component, please check the [Auth0 UI Components Documentation](https://auth0-ui-components.vercel.app/) for component-specific prerequisites and setup instructions.

### License
## Troubleshooting

### Common Issues

1. **Build Errors in Monorepo Setup**
- Make sure you run `pnpm run build` at the project root before starting the dev server
- Ensure all dependencies are installed with `pnpm install` at the root

2. **Auth0 Configuration Issues**
- Verify your `.env` file is in the correct location
- Check that your Auth0 domain, client ID and configured variables are correct
- Ensure Auth0 application settings match your local development URL

3. **Port Already in Use**
- If port 5173 is already in use, Vite will automatically use the next available port
- Check the terminal output for the actual port being used

4. **pnpm Command Not Found**
- Install pnpm globally: `npm install -g pnpm`
- Or use npx: `npx pnpm install`

### Getting Help

If you encounter any issues:

- Check the [Auth0 Documentation](https://auth0.com/docs)
- Open an issue in the project repository

---

**Note**: This setup guide assumes you're working with the latest version of the codebase. If you encounter version-specific issues, please refer to the project's main documentation or create an issue in the repository.

## License

Copyright 2025 Okta, Inc.

Expand Down
7 changes: 5 additions & 2 deletions examples/next-rwa/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"dev": "next dev -p 5173",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"auth0:bootstrap": "node ./scripts/bootstrap.mjs"
},
"dependencies": {
"@auth0/nextjs-auth0": "^4.12.2",
Expand All @@ -21,7 +22,9 @@
"react-dom": "^19.2.1",
"react-hook-form": "^7.57.0",
"react-i18next": "^15.5.3",
"tailwindcss": "^4.1.17"
"tailwindcss": "^4.1.17",
"execa": "^9.1.0",
"ora": "^8.0.1"
},
"devDependencies": {
"@types/react": "^19.1.2"
Expand Down
Loading
Loading