This is a reference app for building a login/logout experience with Ionic Auth Connect and Azure AD B2C.
To see this app in action, check out the Capacitor 2.0 Launch presentation.
Ionic Auth Connect is used to implement a simple login/logout experience (with Azure AD B2C as the authentication provider) that works on the web, iOS, and Android. Capacitor is used to deploy the app to a mobile device.
This is a modified version of the Ionic blank starter project. Major portions of the code include:
- The Home page (
src/app/home). Displays the signed-in user's details (retrieved from Azure). 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. - The AuthenticationService class (
src/app/services/authentication.service.ts). The login/logout implementation using Auth Connect and Azure AD B2C. - Auth Connect configuration details in environment files (
src/environments/). Web and Native configurations for Azure AD B2C.
<ion-button>: Buttons for logging in and out of the app.<ion-loading>: A loading indicator displayed when login begins.
NOTE: This app requires an Ionic Native Enterprise Edition key in order to install and use the Ionic Auth Connect plugin. Ionic Native EE includes a reliable set of Native Solutions for Ionic apps, quality controlled and maintained by the Ionic Team. If you are interested in acquiring a key or learning more, please contact us here.
- Setup your Ionic app for Ionic Native EE first here.
- If not already installed, install Ionic and native-run:
npm install -g @ionic/cli native-run. - Clone this repository.
- In a terminal, change directory into the repo:
cd demo-authconnect-azureb2c. - Run
npm install. NOTE: This will fail if an Ionic Native key hasn't been registered. - Replace values in Environment file (
src/environments/environment.ts) with your own Azure AD B2C configuration details. - Run
ionic serveto view the app in a browser.