How does it work

How does it work?

The application is an ExpressJS application that React on the client to implement all user interactions.

Since the application is designe to be deployed either on [your own server](Server Deployment) or [webtask.io](Webtask Deployment) the application is bundled using webpack so single file is required to run the application.

Additionally the application uses two components of the Auth0 developer tools:

• Lock for Web. As mentioned before this is a UI component that can be used in websites to simplify the creation of a Sign-In/Sign-Up workflow. By using Lock there is no need to implement the usual pages required for login. In this case Lock is used to implement the login workflow for the users that want to change their e-mail address.
• Node SDK. This library provides access to the Management API that allows developers to create applications that can manage the users registered in the Auth0 Tenant. The application uses it to validate that the e-mail address requested is not being already used and to modify the users profile.

Login

The following diagram depicts how the application uses Lock to login the user

• The application uses Lock in [Redirect Mode]((https://auth0.com/docs/libraries/lock/types-of-applications#redirect-mode) to avoid problems with mobile browsers or pop-up blockers.
• Every time a user access the page, he or she will be prompted to login. Since the e-mail address is used to reset passwords, send PasswordLess authentication codes and confirmations of many other operations,updating it must require to present its latest credentials.
• Only the Sign-In option,and only for the specified database connection, will be displayed in the application.
• The users's information, e-mail and name, is included in the resulting id_token because the application request them in the scope Lock authentication parameter. This avoids a subsequent call to the token endpoint.

  If you intend to use more than a couple of attributes of the profile it is better to use Lock to get the profile in a different call. You can find a sample here

E-mail Update

The following diagram shows how the application uses works once the user has logged in

The application exposes two endpoints that are used by the page. Both endpoints are secured using Auth0's express-jwt middleware to validate that the user has a valid id_token.

• api\isavailable This endpoint allows GET calls and expects a single parameter m which specifies the e-mail address to validate. This endpoint uses the List or search users operation to validate that the e-mail address is not being used by other user. The search does not provide an exact match condition so the application checks the final results to validate that there is an exact match in the resultset and only returns a value indicating whether the e-mail is available or not.

• api\me This endpoint allows PATCH calls and expects a body with the following payload

  {
      "email": "[email protected]"
  }

  The information of the user is obtained from the token and then the endpoint uses the Update a user operation to change the user's e-mail address. If the operation is successful then the endpoint uses the E-Mail verification job operation to request that Auht0 sends a Verification mail.

  If you would like to send the mail yourself or modify the final page displayed after verification you can use the Create email verification ticket operation