Add two examples for auth0

README.md

@@ -18,6 +18,7 @@ Here's a list of our current examples:
 
 - [with-airtable-prismjs-axios](./with-airtable-prismjs-axios)
 - [with-apollo](./with-apollo)
+- [with-auth0](./with-auth0)
 - [with-cockroachdb](./with-cockroachdb)
 - [with-coingecko](./with-coingecko)
 - [with-firebase](./with-firebase)

with-auth0/README.md

@@ -0,0 +1,25 @@
+# StepZen Example: `with-auth0`
+
+## Introduction
+
+This project builds a GraphQL API connected to Auth0. [Auth0](https://auth0.com/) is a cloud-based identity management platform that provides authentication, authorization, and user management for web, mobile, IoT, and internal applications.
+
+## Getting Started
+
+You'll need to create a [StepZen account](https://stepzen.com/request-invite) first. Once you've got that set up, [git clone](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-clone) this repository onto your machine and open the working directory:
+
+```bash
+git clone https://github.com/stepzen-dev/examples.git
+cd examples/with-auth0
+```
+
+This project shows how to use Auth0 to authenticate users and authorize them to access data using OAuth 2.0, using two different flows:
+
+- [Authorization Code Flow](./authorization-jwt) - used for frontend applications
+- [Client Credentials Flow](./client-credentials) - used for machine-to-machine communication
+
+Open the `README.md` file in the `authorization-jwt` or `client-credentials` directory to learn how to set up Auth0 for that flow.
+
+## Learn More
+
+You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.gg/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions.

with-auth0/authorization-jwt/.env.sample

@@ -0,0 +1,9 @@
+AUTH0_SECRET='LONG_RANDOM_VALUE' # A long, secret value used to encrypt the session cookie
+AUTH0_BASE_URL='http://localhost:3000'
+AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
+AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
+AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_ID'
+AUTH0_AUDIENCE='YOUR_AUTH0_CLIENT_ID'
+
+# Your StepZen endpoint
+STEPZEN_ENDPOINT='YOUR_STEPZEN_ENDPOINT'

with-auth0/authorization-jwt/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

with-auth0/authorization-jwt/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

with-auth0/authorization-jwt/README.md

@@ -0,0 +1,96 @@
+# StepZen Example: `with-auth0`
+
+## Introduction
+
+This project builds a GraphQL API connected to Auth0, using the [Authorization Code Flow](https://auth0.com/docs/flows/authorization-code-flow). Which is used for frontend applications.
+
+[Auth0](https://auth0.com/) is a cloud-based identity management platform that provides authentication, authorization, and user management for web, mobile, IoT, and internal applications.
+
+## Getting started​
+
+In this section, we will configure our Auth0 client, so we can easily integrate it into our StepZen GraphQL API.
+
+You need to have an Auth0 account to complete this tutorial. If you don't have an account, you can [sign up for a free Auth0 account](https://auth0.com/signup).\
+
+Perform the following steps to set up your Auth0 client:​
+
+**Create an API**
+
+This API is used to represent your StepZen GraphQL API, and give it access to the Auth0 authorization server.
+
+- Log in to Auth0 dashboard.
+- Click the **Applications** link in the left navigation pane.
+- Click the **APIs`** link in the left navigation pane.
+- Click the **+ Create API** button.
+- Fill out the API fields:​
+  - Enter a name in the Name field to help you identify this client. For example: _My StepZen API_.
+  - For the _Identifier_ field, enter a unique value. For example: `https://my-stepzen-api.com`
+
+**Create an Application**
+
+This application is the authorization server that will be used to generate access tokens for your StepZen GraphQL API.
+
+- Go Back to the **Applications** page.
+- Click the **+ Create Application** button.
+- Fill out the Application fields:​
+  - Enter a name in the Name field to help you identify this client. For example: _My StepZen App_.
+  - For application type, select _Single Page Web Applications_ (or _Regular Web Applications_).
+- Click the **Create** button.
+- Go the Settings tab to find the configuration needed to integrate with StepZen.​
+  - _Domain​_
+  - _Client ID​_
+  - _Client Secret​_
+- Scroll down to the **Allowed Callback URLs** field and add the following URL: `http://localhost:3000/api/auth/callback`
+- Go to the **API** tab to authorize the API we created earlier.​
+
+> Read the Auth0 documentation for more information on how to [set up a Machine to Machine application](https://auth0.com/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps).
+
+Next, we need to set up our StepZen GraphQL API to use the Auth0 authorization server. Copy the file `sample.config.yaml` to `config.yaml` and add the following configuration:
+
+```yaml
+# Add the JWKS endpoint
+deployment:
+  identity:
+    jwksendpoint: 'https://YOUR_AUTH0_DOMAIN/.well-known/jwks.json'
+```
+
+After adding these details, it's time to run and deploy the StepZen GraphQL API. Run the following command to start the GraphQL API:
+
+```bash
+stepzen start
+```
+
+In your terminal, you should see the endpoint of the StepZen GraphQL API. Copy this endpoint.
+
+We need to add this value the environment variables of our Next.js app. Rename `.env.sample` file to `.env` and add your Auth0 credentials and the StepZen GraphQL API endpoint to the file:
+
+```bash
+AUTH0_SECRET='LONG_RANDOM_VALUE' # A long, secret value used to encrypt the session cookie
+AUTH0_BASE_URL='http://localhost:3000'
+AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
+AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
+AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_ID'
+AUTH0_AUDIENCE='YOUR_AUTH0_CLIENT_ID'
+
+# Your StepZen endpoint
+STEPZEN_ENDPOINT='YOUR_STEPZEN_ENDPOINT'
+```
+
+> The value for `AUTH0_AUDIENCE` is the identifier you set for your API in Auth0.
+
+## Try it out
+
+Now that we have configured everything, we can try it out. Run the following command to start the Next.js app:
+
+```bash
+npm run dev
+# or yarn dev
+```
+
+Open the app in your browser at `http://localhost:3000`. You should see a login button. Click the button to log in. You will be redirected to the Auth0 login page. Enter your credentials and log in.
+
+On the screen you should see the email address you used to login. This is the email address that was returned by Auth0 after the StepZen GraphQL API verified the JWT that was sent by Auth0.
+
+## Learn More
+
+You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.gg/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions.

with-auth0/authorization-jwt/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig