diff --git a/examples/nextjs-app/README.md b/examples/nextjs-app/README.md index 19b2bce..a8b3d7f 100644 --- a/examples/nextjs-app/README.md +++ b/examples/nextjs-app/README.md @@ -4,9 +4,19 @@ This project demonstrates how to implement the Authorization Code Flow with PKCE Disclaimer: This project is for educational purposes only and should not be used in production without proper security review and testing. -## Deployment +## Demo -This project is deployed on Cloudflare Pages. You can access the live demo [here](https://cerberauth-nextjs-app-oidc.pages.dev/). +This project is deployed on [Cloudflare Pages](https://cerberauth-nextjs-app-oidc.pages.dev/) and on [Vercel](https://cerberauth-nextjs-app-oidc.vercel.app/). + +## Deploy your own + +Deploy the project using **Vercel**: + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcerberauth%2Fopenid-connect-examples%2Ftree%2Fmain%2Fexamples%2Fnextjs-app&env=AUTH_SECRET,AUTH_CLIENT_ID,AUTH_CLIENT_SECRET&envDescription=Configurations%20Documentation&envLink=https%3A%2F%2Fgithub.com%2Fcerberauth%2Fopenid-connect-examples%2Fblob%2Fmain%2Fexamples%2Fnextjs-app%2FREADME.md&project-name=nextjs-app-oidc&repository-name=cerberauth-nextjs-app-oidc&demo-title=Next.js%20with%20OpenID%20Connect&demo-description=A%20Next.js%20App%20using%20OpenID%20Connect&demo-url=https%3A%2F%2Fcerberauth-nextjs-app-oidc.pages.dev%2F) + +Deploy the project using **Cloudflare**: + +[![Deploy to Cloudflare Pages](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cerberauth/openid-connect-examples/tree/main/examples/nextjs-app) ## Prerequisites @@ -30,47 +40,50 @@ Before getting started, make sure you have the following: npm ci ``` -3. Configure the OpenID Connect provider: +3. Configure the OpenID Connect provider (see the Configuration section below). -If you don't have an OpenID Connect provider, you can use [TestID OpenID Connect Provider](https://testid.cerberauth.com/). +4. Start the development server: - - Obtain the client ID and client secret from your OpenID Connect provider. - - Register the redirect URI for your Next.js App in the provider's developer console. + ```bash + npm run dev + ``` -4. Update the configuration: +5. Open your browser and navigate to `http://localhost:5173/`. - - Create a `.env.local` file in the root directory of your project or copy `.env.example` file. - - Add the necessary environment variables to the `.env.local` file. For example: +6. Click on the "Login" button to initiate the authorization code flow. - ```plaintext - AUTH_SECRET=secret - AUTH_CLIENT_ID=your-client-id - AUTH_CLIENT_SECRET=your-client-secret - ``` +7. After successful authentication, you will be redirected back to the application and the user information will be displayed. - Generate a random secret using the following command: +## Configuration - ```bash - openssl rand -base64 33 - ``` +Configure the OpenID Connect provider: - Replace `secret` with the generated secret. +If you don't have an OpenID Connect provider, you can create a Test Client on the [TestID OpenID Connect Provider](https://nacho.cerberauth.com/templates/nextjs-app). + + - Obtain the client ID and client secret from your OpenID Connect provider. + - Register the redirect URI for your Next.js App in the provider's developer console. - Replace `your-client-id` and `your-client-secret` with the actual values provided by your OpenID Connect provider. +Update the configuration: +- Create a `.env.local` file in the root directory of your project or copy `.env.example` file. +- Add the necessary environment variables to the `.env.local` file. For example: - - Save the `.env.local` file. +```plaintext +AUTH_SECRET=secret +AUTH_CLIENT_ID=your-client-id +AUTH_CLIENT_SECRET=your-client-secret +``` -5. Start the development server: +Generate a random secret using the following command: - ```bash - npm run dev - ``` +```bash +openssl rand -base64 33 +``` -6. Open your browser and navigate to `http://localhost:5173/`. +Replace `secret` with the generated secret. -7. Click on the "Login" button to initiate the authorization code flow. +Replace `your-client-id` and `your-client-secret` with the actual values provided by your OpenID Connect provider. -8. After successful authentication, you will be redirected back to the application and the user information will be displayed. +Save the `.env.local` file. ## Additional Resources