ionic-team/demo-authconnect-auth0

A simple login/logout experience powered by Ionic Auth Connect and Auth0

Demo App: Ionic Auth Connect with Auth0

This is a reference app used in the Auth0 article on building a login/logout experience with Ionic Auth Connect.

Note: This is a demo/reference sample and thus may not be maintained over time. Specs: @ionic/angular 4.7.1, Angular 8.

What Does the App Do?

Demo video 👇

It demonstrates the usage of Auth Connect to implement a simple login/logout experience (with Auth0 as the authentication provider) that works on the web, iOS, and Android. Either native app runtime (Cordova or Capacitor) can be used to deploy the app to a mobile device.

Implementation Details

This is a modified version of the Ionic blank starter project. There are 3 major components:

• The Home page (src/app/home). Displays the sign in user's profile image and details (retrieved from Auth0). Includes a button to log out of the app.
• The Login page (src/app/login). Protects the Home page from unauthorized access. User must sign in first via this page using Auth Connect and Auth0.
• The AuthenticationService class (src/app/services/authentication.service.ts). The login/logout implementation using Auth Connect and Auth0.

Ionic components

• <ion-button>: Buttons for logging in and out of the app.
• <ion-loading>: A loading indicator displayed when login begins.
• <ion-avatar>: Avatar displays user's profile picture.

How to Run

NOTE: This app requires an Ionic Native key in order to install and use the Ionic Auth Connect plugin. Ionic Native includes a reliable set of Native APIs & functionality that you can use in your Ionic app, quality controlled and maintained by the Ionic Team. If you are interested in acquiring a key or learning more, please contact us here.

1. Clone this repository.
2. Run npm install.
3. Follow the Auth Connect plugin installation instructions here.
4. Fill in Auth0 credentials in (src/app/services/authentication.service.ts)
5. Build and Deploy to an Android or iOS device.
6. Additionally, run locally as a web app with ionic serve.

Resources

• Auth0 tutorial
• Auth Connect documentation
• Auth0 website

demo-authconnect-auth0's Issues

Stops working when user is blocked after getting initial login success

Steps to reproduce

1. Login into App using any unblocked user.
2. After successfull login, block the user.
   3.When existing token expires , try to refresh token by going to any other page so that Auth Guard code calls isAuthenticated method.
3. Auth guard doesn't redirect to login page and following error shows up. Tried to catch the error but unable to handle it.

{status: 403, url: "https://******.auth0.com/oauth/token", headers: {…}, error: "{"error":"invalid_grant","error_description":"user is blocked"}"}
error: "{"error":"invalid_grant","error_description":"user is blocked"}"
headers: {date: "Fri, 17 Apr 2020 21:13:25 GMT", content-length: "63", server: "nginx", okhttp-selected-protocol: "h2", x-auth0-requestid: "3a668e8912e163f42157", …}
status: 403