Developer
Creating a Login Section
Table of Contents:
Introduction
When you need authentication process that only allow your registered users to access your app, you need to add a Login section. By this guide, we will provide you practice to add a Login section to your website. Several authentication third-party can be used to create this Login section, such as Auth0.
Using Auth0
-
After creating a new Auth0 account, you will be navigated to the Dashboard for the first time. You will find options that will guide you to setup the Auth0 to your website. Choose to follow the guide.
-
Follow the starting guide steps until you are ready to create an application.
-
Auth0 will provide you with the starting sample code that will be used in the next step, better to download the sample code.
-
Next after finishing the starting guide, you need to create an application. Click the Create Application in Getting Started page.
-
Fill the Name field and choose Single Page Application for the application type, then click Create.
-
You will be navigated to the Application page, there will be another Quick Start that will guide to setup Auth0 in your website. You can follow it and use the previous downloaded sample code as starter.
-
In the code sample, several lines need to be change. More important in the auth_config.json, you need to change the variable value there based on your application. You can find the value inside the Application page > Settings tab.
-
Don't forget to register your URLs in the Allowed Callback URLs and Allowed Logout URLs to validate your redirect destination after login or logout. The option to insert the URLs is in Application page > Settings tab > below the Application Properties section.
- Finally you can run your sample code to try the authentication process locally by following the instruction in the guide to use
npm run devcommand in terminal.
What's Next?
Congratulations! You have finished guide on creating a login section with Nimvio and authentication third-party service. Keep exploring others below: