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.
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.
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.
<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.
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.