Okta
Octa
Introduction
Auth0 Lock is a UI library that allows you to embed a login widget anywhere on your web page. If you need to embed a login form in a web page, you can implement it without developing from scratch by using this Auth0 Lock.
If you don't need to embed the login form, it is recommended to use "Universal Login", which can redirect you to the login page of the authentication server managed by Auth0 during user authentication, from the point of view of management and security. .
Auth0 Lock is also used in the Classic version of universal login, and can be set from Branding > Universal Login in the Auth0 administration screen.
Configurable items in Auth0 Lock
Please see below for items that can be set with Auth0 Lock.
https://auth0.com/docs/libraries/lock/lock-configuration
The main setting items and parameters are as follows.
| item | parameter | explanation |
| UI (user interface) | allowAutocomplete (username autocomplete) | Auto-completion of email addresses or usernames |
| allowShowPassword | Possibility of password display button | |
| allowedConnections | list of allowed authenticated connections | |
| language | Display language | |
| languageDictionary (text for a specific section) | the text content of a particular section in lock | |
| rememberLastLogin | Whether or not to display the account information used last time | |
| Theme | authButtons (authentication buttons) | Customizing the authentication button |
| labeledSubmitButton | With or without text on the submit button | |
| logo | URL of the logo file | |
| primaryColor (main color) | main button color | |
| Authentication | params (parameters) | Parameters to send when logging in |
| redirectUrl (redirect URL) | URL to redirect after authentication | |
| responseType (response type) | Requested flow type (Authorization code flow is "code") | |
| Database | additionalSignUpFields (additional signup fields) | Adding fields to the signup screen |
| allowLogin (display login screen) | Whether or not to display the login screen | |
| allowForgotPassword (show password link) | Display password link | |
| allowSignUp (display signup screen) | Whether or not to display the sign-up screen | |
| forgotPasswordLink (password reset link) | Setting up a password reset link | |
| mustAcceptTerms (consent Box) | Whether or not to display the consent check Box | |
| usernameStyle (username style) | Possibility of inputting "username" and "email" in user name input |
Auth0 Lock parameter change example
In this section, we will introduce an example of changing the parameters of Auth0 Lock.
A sample application is available in the Auth0 Lock GitHub repository. When you execute the command below and access https://localhost:3000 with a web browser, the Lock screen will be displayed.
(1) Added a password display button in the password entry field
Add a password display button so that you can check the entered password
▼Setting details
allowShowPassword: true
*Default is "false"
▼ Screens before and after setting change
(2) Change the display language to Japanese (ja)
Display login screen in Japanese
▼Setting details
language: 'en'
*Default is 'en'
▼ Screens before and after setting change
(3) Change to any logo
Change the logo on the login screen to any image
▼Setting details
theme: {
logo: '{URL where logo image file is saved}'
}
*Default is Auth0 logo
▼ Screens before and after setting change
(4) Adding an address entry field to the sign-up screen
Add an address field to the signup screen
(default is user ID and password only)
* You can also set the icon and whether or not input is required with the additionalSignUpFields parameter option.
▼Settings (Example: Add address field)
additionalSignUpFields: [{
name: "address",
placeholder: "enter your address"
}]
▼ Screens before and after setting change
(5) Changed to hide the sign-up screen
Hide the signup screen and limit the display to the login screen
(By default, the sign-up screen is also displayed)
▼Setting details
allowSignUp: false
*Default is "true"
▼ Screens before and after setting change
Summary
By using Auth0 Lock, you can implement a login form on a web page without creating a screen from scratch.
Auth0 Lock has a wide variety of configuration parameters, and requirements that require embedding in web pages can be easily implemented using Auth0 Lock. Please contact us for customization according to your requirements.
Inquiry/Document request
In charge of Macnica Okta Co., Ltd.
- TEL：045-476-2010
- E-mail：okta@macnica.co.jp
Mon-Fri 8:45-17:30