TakeShape Starter Auth0

The following is a guide to launch a Next.JS project that uses Auth0 for authentication and TakeShape to store custom user profile information.

This is a Next.js project bootstrapped with create-next-app.

Instructions

1. Create an Auth0 account, if you haven't already at auth0.com.

2. Create an Auth0 application by going to the Applications page under the Applications tab on the left.

   • Choose to create a Regular Web Application.
   • Take note of your domain, you'll need it later. It typically looks like this: dev-by9w1mxg.us.auth0.com.
   • Go to the Settings tab, scroll down, and fill in the following fields:
     • Allowed Callback URLs: http://localhost:3000/api/auth/callback
     • Allowed Logout URLs: http://localhost:3000/
     • Allowed Web Origins: http://localhost:3000/
     • Allowed Origins (CORS): http://localhost:3000/
   • Scroll down to the very bottom of page and click Save Changes; the application doesn't automatically save itself!

3. Create a TakeShape project using the pattern in this repo. This button will deploy the project for you:

   • 

4. Create an Auth0 service in your new TakeShape project.

   • Go to the Schema tab, then click Connect Service.
   • Type in your Auth0 domain from the earlier step.
   • Take note of the audience from the TakeShape config screen, you'll need it later.
   • Save the service.

5. Set up your TakeShape API Key.

   • Go to the API tab, then to API Keys.
   • Create a new API Key.
   • Give it Read permissions.
   • Copy the key and save it somewhere. This is the only time you'll see it.

6. Now go back to your Auth0 account and create an API (it's on the APIs page under the Applications tab on the left).

   • Set the identifier to the audience you encountered earlier on the TakeShape Auth0 Service page.
   • Leave the signing algorithm as RS256.
   • Create the API.

7. Head over to your trusty terminal or tool of choice.

   • Clone this repo with git clone https://github.com/takeshape/takeshape-starter-auth0.git.
   • cd into the folder that the cloning created.
   • Run mv .env.local-example .env.local to rename the environment variables file.
   • Run npm install.

8. Follow the instructions in .env.local. Some of the data you enter will be from Auth0; some of it will be from TakeShape.

9. Run npm run dev to start the application and open http://localhost:3000 with your browser to play around!

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!