todo-with-nextjs-auth0-auth

Todo Web Application with Auth0 Authentication

Read the accompanying blog post

A todo application that uses the following technologies:

• Exograph for the backend
• Next.js and Tailwind for the frontend
• Auth0 for authentication

Prerequisites

Backend Requirements

• Exograph
• PostgreSQL or Docker

Frontend Requirements

• Node.js

You'll also need to create an Auth0 project by following these instructions.

Running the application

Clone this repository to your local machine and navigate to the todo-with-nextjs-auth0-auth directory.

Backend

Open a new terminal window and run the following commands:

cd api
EXO_OIDC_URL=https://<...>.auth0.com exo yolo

Frontend

Copy the .env.local.example file to .env.local in the web directory. Then, update the NEXT_PUBLIC_AUTH0_DOMAIN and NEXT_PUBLIC_AUTH0_CLIENT_ID variable with your Auth0 projects's values.

Open a new terminal window and run the following commands:

cd web
npm install
npm run dev

You can now access the application in your browser at http://localhost:3000. You can sign in with your Google account and start creating todos!

Next steps

• Explore the playground. Visit http://localhost:9876 to access the GraphQL playground. There, you can authenticate using the built-in UI. See the blog post for more details.
• Explore the development mode. Yolo mode used so far is great for getting started, but if you had to restart the server, you would lose all your data. Development mode allows you to persist your data between restarts.
• Deploy your application. Once you are happy with your application, you can deploy it to any cloud provider supporting Docker containers. You can also deploy it to AWS Lambda.