Config

Introduction

This article shows how to config login and logout functions.

Guide

• Step 1. Go to auth.factory.ts

Update Issuer and ClientID

Example:

issuer: 'https://login3-demo.casewhere.com/runtime/oauth2',

clientId: 'xj2oKyIdW4JUVT9ic6a5', // The "Auth Code + PKCE" client

• Step 2. Go to authFactory function

Check callback URLs in the redirectUri.

Example setup for mobile and browser

For mobile:

let redirectUri = 'com.casewhere.mobile:/login-method';
let silentRefreshRedirectUri = 'com.casewhere.mobile:/';
let logoutUrl = 'com.casewhere.mobile:/login-method';

For browser:

if (!platform.is('cordova')) {
	redirectUri = window.location.origin + '/login-method';
	silentRefreshRedirectUri = window.location.origin + '/silent-refresh';
	logoutUrl = window.location.origin + '/login-method';
}

• Step 3. Making sure the redirectUri and the logoutUrl match with your identify provider settings.

For example, below is the settings we made in Safewhere Identify.

• Step 4. Build and run the project again for testing

PKCE Authentication flow explanation

This template adopted PKCE flow, which is a new, more secure authorization flow (based on the OAuth 2.0 spec) that was designed to improve the security of mobile apps.

Authentication flow is handled by the angular-oauth2-oidc library, and can be briefly summarized as following:

1. User presses login button. The app create a random value v. Then v will be hashed into a value called $
2. The app redirect to the login page with $
3. Identify provider returns a login form
4. The app submits the credentials received from users and send to Identify, from here goes on Identify provider will handle authenticate the users.
5. Identify redirect with code a
6. App send request, includes requests for Client Id, v, and a
7. Identify validate with Client ID, check if sha256(v) = $