Create New Auth0 Application and Download Quickstart
Create a new application with the Auth0 CLI with the auth0 apps create command.
Name the application, create a description, and select the application type.
If you don't have an application set up with Auth0 you can run auth0 quickstarts download to download a sample application that's already configured with Auth0.
Once the quickstart is downloaded open your code editor and open src/auth_config.json file and copy the domain and clientId from the settings inside the Auth0 dashboard, if they aren't population already.
Run npm run start to load the application on localhost:3000 and test out the login flow.
Instructor: [0:00] The next command you'll type in is Auth0 apps create. This allows to create a new application for Auth0 tenant. Over the name, we'll say Egghead Demo. Description, Demo App for Egghead Course. Then it will ask you to select the type of application that you're using. Since I'm going to use React for this example, we'll select single-page Web application. [0:34] Next to see a line, we'll actually for a callback URL. The callback URL is where you want the user to be redirected to after they authenticate with Auth0. This could be a profile page, a dashboard, a home-screen feed, whatever it is in your production app, but for this we'll use localhost:3000.
[0:52] Then there is allowed logout URLs. Allowed logout URLs is where you want the users to be redirected to after in their session and log out. So that could be back on the login screen or something like that.
[1:10] Again, this will stay localhost:3000 for this application. Next is allowed origin URLs. For this, we'll keep localhost:3000. Allowed origin URLs are for your rails that you want to allow to make JavaScript calls to the Auth0 API so you won't get any errors.
[1:32] Allowed Web origin URLs are list of URLs of where the authorization requests are originating from. Again, we'll set this for localhost:3000.
[1:44] Now that we have an application inside of Auth0 tenant, we need to connect it to a React application. To do that, type in Auth0, QuickStarts. Download. Next, it will ask you what application you want to use and I'm going to use the Egghead demo.
[2:13] Next, it will ask you what stack you want to you. For this, I will choose React. The QuickStart downloaded a sample application that is already configured and ready to go with Auth0. We will hit CD Egghead demo and then sample 01. Then let's npm-install.
[2:40] Now that we have the npm packages installed, go to the Auth0 dashboard, click on applications. Applications. Then we'll go to our Egghead demo application.
[2:57] Then the settings, we will copy our domain name. With the domain name copied, open up the sample application inside of VS Code. Go to the source folder and the go to auth_config.json.
[3:18] In this file is where you configure your application to be connected with Auth0. As you can see, the client ID is already here and that was from the Auth0 dashboard. The next thing we need to type in is the domain. Paste in the domain that you copied from the settings from the application.
[3:41] Then for audience, we will delete because we're not connecting it to any type of API. Make sure that you hit save.
[3:51] Next, you can go back to your terminal or use the terminal that's within VS Code and type in npm-run start. This will open up the React sample application on localhost:3000 and then you can click the menu button and click login.
[4:10] This will take you to the Auth0 universal login page. It usually is installed in such loud colors, but I was doing another demo and that's why there's a lime green continue button. I'm going to continue with Google and use one of my email addresses.
[4:28] Next, I'll accept that the demo application wants access to some profile information. Then you see, I'm authenticated. I'm logged in and I also have a profile page that has a little bit of information about my profile.
[4:45] Now that you have an Auth0 account, an application within your Auth0 tenant, and a React application connected to your Auth0 application. Now, we can get started creating some Auth0 action.