DEV Community

loading...
Cover image for Auth0, React & Express starter

Auth0, React & Express starter

codsworth
I'm a Stockholm, Sweden based javascript developer. Currently I'm trying to learn in public, and get better at creating content for dev teams to improve their dev experience and productivity.
Updated on ・2 min read

Auth0, React and Express Starter

This is a reference project for using Auth0 to authenticate your React and Express apps. The repo code can be found here.

Prerequisites

Get docker here

Get started with React & Auth0

Sign up for a free auth0 account. Once you sign in, Auth0 takes you to the Dashboard. In the left sidebar menu, click on Applications->Applications.

Click the Create Application button. A modal opens up with a form to provide a name for the application. Provide it and choose Single Page Application.

Click on the Settings tab of your Auth0 Application page and fill in http://localhost:3000 under Allowed Callback URLs, Allowed Logout URLs and Allowed Web Origins. Don't forget to save.

Get started with Express & Auth0

Head to Auth0 Dashboard->Applications->Apis, and click the Create API button. Name your api and set a identifier value and click save.

Set up environment variables in docker-compose.yml

Under server in your docker-compose.yml fill in

  • AUTH0_DOMAIN with the value from Auth0 Dashboard->Applications->Your app name->Settings->Domain.

  • AUTH0_AUDIENCE with value from Auth0 Dashboard->Applications->Apis->Your api name->Settings->Identifier.

Under client in your docker-compose.yml fill in

  • REACT_APP_AUTH0_DOMAIN with the value from Auth0 Dashboard->Applications->Your app name->Settings->Domain.

  • REACT_APP_AUTH0_CLIENT_ID with the value from Auth0 Dashboard->Applications->Your app name->Settings->ClientId.

  • REACT_APP_AUTH0_AUDIENCE with the value from Auth0 Dashboard->Applications->Apis->Your api name->Settings->Identifier.

Local Development

Run the command below and go to http://localhost:3000 in your browser. It might take a while before the client app starts up.

$ docker-compose up
Enter fullscreen mode Exit fullscreen mode

Demo

Test out demo here

Discussion (0)