There are certain things that we need to know before digging more into code.

Auth0 uses JWT (JSON Web Token), which is a compact way of sharing information between two parties via JSON. In simple terms, when the user is authenticated, Auth0 sends us JWTs, which have information about the user and also allow the user to access authenticated routes/URLs. Auth0 sends back an access_token, which is required for accessing authenticated routes, and it also sends us an id_token, which contains the user's profile information such as their username, profile picture, and so on. Both of these tokens have a short lifespan and then they expire. But along with that, Auth0 also sends us a refresh_token, which has a long expiry date and can be used to get a new id_token and access_token.

We configured the Callback URL in our app. This is the URL where Auth0 redirects the user after authentication. A callback URL includes the app's package ID, and that's why we need to mention it while installing the plugin. We also need to add file:// in CORS (Cross-Origin Resource Sharing), because the Ionic app makes an HTTP request from file:// origin.

Most of the work is in AuthService. AuthService allows us to log in/log out. It uses the auth0.js and auth0/cordova library for authentication. First, we are creating an auth0Config object. This object looks like the following:

const auth0Config = {   
    clientID: ''  
    clientId: '',   
    domain: '',   
    callbackURL: location.href,   
    packageIdentifier: '' 
};

• In the preceding code, you can see that clientID and clientId have the same value. It is the value that we saved earlier. The first is used by auth0.js, and the latter is used by auth0/cordova.
• The domain is also our Auth0 Domain used for authentication. We saved it earlier when we created our app on the Auth0 dashboard.
• callbackURL will always be location.href.
• packageIdentifier is the package ID of your app, same as in your config.xml.

We are then passing this config to both Auth0.WebAuth constructor function, and Auth0Cordova constructor function.

In the login function, we initiate authentication by calling Auth0Cordova's authorize function. It is important to notice that we are passing an option object with scope key into an authorize function as the parameter. This scope key tells Auth0 to return certain data like an email and profile after authentication is completed. We are also passing a callback function as the second parameter, which fires when authentication is completed. When authentication is initiated, Auth0Cordova opens the OS browser and redirects us to our Auth0 Domain. Here, the user can log in and register. By default, email/password authentication is configured for the app. But you can enable Google, Facebook, and GitHub authentication, and they will also appear along with email/password authentication. When the user is authenticated, the browser redirects us to our app via the Custom URL Scheme. Then, we store idToken and accessToken in localstorage and also get profile information using the auth0.client.userInfo function. Then later in the login method, we also save this information to localstorage.

In the logout function, we are just removing idToken, accessToken, token Expiration information, and Profile data from localstorage and also resetting the AuthService class.

In home.html, we show a Log In button when the user is not authenticated; when the user is authenticated, we show a profile picture and the username of the user, along with the LOGOUT button. These login and logout methods in home.ts call AuthService's login and logout function respectively.

Here is how our app looks when the user is not authenticated:

When the user clicks on, it opens a web page for authenticating the user. It looks like the following:

Here is how our app looks when the user is authenticated: