Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takeshape/takeshape-starter-auth0
https://github.com/takeshape/takeshape-starter-auth0
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/takeshape/takeshape-starter-auth0
- Owner: takeshape
- Created: 2021-06-03T17:59:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-22T19:35:35.000Z (over 3 years ago)
- Last Synced: 2023-03-02T21:26:12.251Z (over 1 year ago)
- Language: JavaScript
- Size: 219 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://nextjs.org/) project bootstrapped with
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Instructions
1. Create an Auth0 account, if you haven't already at [auth0.com](https://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](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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
are welcome!