I tried running the Angular sample in Auth0 Quick Start with Docker

When I looked into each sample source of Auth0, it prepared Dockerfile, so I tried to build the environment.

About Auth0

Please refer to the outline below.

I checked the function of Auth0 --Qiita https://qiita.com/kai_kou/items/b3dd64e4f8f53325020e

Auth0 is iDaaS provided by Auth0, Inc., which stands for Identity as a Service and provides ID management and authentication functions in the cloud. Functions provided by iDaaS include authentication / single sign-on, ID management / linkage, authorization, and auditing using logs, and Auth0 also provides them.

Account creation

Please refer to the following for creating an Auth0 account.

I tried the Auth0 JavaScript tutorial with a simple configuration --Qiita https://qiita.com/kai_kou/items/51ce27a8f98a14263e26#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

Auth0 settings

Once you have an Auth0 account, set up Auth0 to use in the sample app.

Application settings

Open the Application screen with "Applications" on the left menu of the dashboard of Auth0, and open the setting of "Default App" from the beginning.

Set and save the Application URIs as follows. http: // localhost: 4200 is the URL of the sample app.

Allowed Callback URLs: http://localhost:4200
Allowed Logout URLs: http://localhost:4200
Allowed Web Origins: http://localhost:4200

Creating an API

Since the Angular sample uses the Custom API of Auth0, create the API. Open the API screen from "APIs" on the left menu of the Auth0 dashboard, and click the "+ CREATE API" button.

Set as follows in the API creation dialog.

--Name: Any name (here angular)

Identifier: http://localhost:3001 --It will be the URL of the API in the sample app

Universal login settings

Select "Universal Login" from the Auth0 dashboard left menu and change Experience to New.

This completes the settings on the Auth0 side.

Get URL of sample source

Get the sample source for Angular. Select "Applications" from the left menu of the Auth0 dashboard, open the Application "Default App", and select the "Quick Start" tab.

If you select Angular, a tutorial using Auth0 will be displayed.

Click the "VIEW ON GIT HUB" button in "I want to explore a sample app" to display the Github page.

Go up to the root of the GitHub repository and get the repository URL from "Code".

Build / execute sample source

Clone the repository from GitHub, prepare the necessary configuration files, create a Docker image, and run the container. Get the domain and clientId from the Auth0 "Default App" application.

>cd any directory
>git clone https://github.com/auth0-samples/auth0-angular-samples.git
>cd auth0-angular-samples/Sample-01

>cat << EOF > auth_config.json
{
  "domain": "<Own domin>",
  "clientId": "<Own clientId>",
  "audience": "http://localhost:3001",
  "apiUri": "http://localhost:3001",
  "appUri": "http://localhost:4200"}
EOF

>docker build -t auth0-angular-samples ./

>docker run -it --rm -p 3000:4200 -p 4200:3001 auth0-angular-samples


> [email protected] prod /app
> npm-run-all --parallel server:app server:api


> [email protected] server:app /app
> node server.js


> [email protected] server:api /app
> node api-server.js

App server listening on port 4200
Api started on port 3001

Try to run

Once the Docker container is up, open http: // localhost: 4200 in your browser. When the Angular app opens, click the "Log in" button in the upper right corner.

After transitioning to the Auth0 login screen, log in with your email address or Google.

If you can log in, the upper right corner will change to the logged-in status. The profile image is (probably) not displayed because I have http, but I was able to do what I wanted to do this time. Wow

You can also check the information of the logged-in user from the "Profile" menu in the upper right menu.

Summary

It is helpful to have a very good sample to check the function of Auth0 quickly.

reference

I checked the function of Auth0 --Qiita https://qiita.com/kai_kou/items/b3dd64e4f8f53325020e