https://github.com/ionic-team/demo-authconnect-azureb2c

A simple login/logout experience powered by Ionic Auth Connect and Azure B2C
https://github.com/ionic-team/demo-authconnect-azureb2c

auth-connect azure-active-directory capacitor ionic native

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ionic-team/demo-authconnect-azureb2c
• Owner: ionic-team
• License: other
• Created: 2020-05-15T21:11:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T07:01:35.000Z (over 1 year ago)
• Last Synced: 2024-10-02T06:21:11.927Z (4 months ago)
• Topics: auth-connect, azure-active-directory, capacitor, ionic, native
• Language: TypeScript
• Homepage: https://ionicframework.com/docs/enterprise/auth-connect/azure-ad-b2c
• Size: 1.17 MB
• Stars: 7
• Watchers: 5
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Demo: Ionic Auth Connect with Azure AD B2C

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](https://ionicframework.com/resources/webinars/capacitor-2-launch).

## User Experience

[Demo video here](https://youtu.be/v-LuS6aiRDo).

[Ionic Auth Connect](https://ionicframework.com/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](https://capacitor.ionicframework.com) is used to deploy the app to a mobile device.

## Implementation Details

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.

### Ionic components

* ``: [Buttons](https://ionicframework.com/docs/api/button) for logging in and out of the app.

* ``: A [loading indicator](https://ionicframework.com/docs/api/loading) displayed when login begins.

## How to Run

NOTE: This app requires an [Ionic Native Enterprise Edition](https://ionicframework.com/docs/enterprise) 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](https://ionicframework.com/enterprise/contact).

- Setup your Ionic app for Ionic Native EE [first here](https://ionicframework.com/docs/enterprise/setup).

- 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 serve` to view the app in a browser.

## Resources

* [Auth Connect documentation](https://ionicframework.com/docs/enterprise/auth-connect)

* [Azure AD B2C configuration](https://ionicframework.com/docs/enterprise/auth-connect/azure-ad-b2c)