Connecting to Custom Authentication Providers
Providers are a way to describe to Auth Connect how to interact with your Authentication provider. We've shipped a number of providers out of the box to cover the most common scenarios, but there are many providers that exist that require a slightly different implementation than the ones we've provided. In these cases, you can create a custom provider to handle the specifics of your provider.
Extending an Existing Provider
In many cases, the providers Auth Connect ships with can get you 95% of the way with just about any authentication provider and it may be that you only need to make one or two small changes to get things working. Perhaps add a few extra parameters to your request, or read the url from a different location. In these cases, extending an existing provider can save you the work of needing to implement all the of the required methods for a completely custom provider. It can be done by simply extending the provider you want to extend and overriding the methods you need to change.
Add a custom parameter to an authorization request
_25import { Auth0Provider } from '@ionic-enterprise/auth';_25_25export class MyCustomProvider extends Auth0Provider {_25 async authorizeRequest(_25 manifest: Manifest,_25 options: ProviderOptions,_25 config: Pick<_25 AuthConnectConfig,_25 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_25 >_25 ) {_25 const { url, params } = await super.authorizeRequest(_25 manifest,_25 options,_25 config_25 );_25_25 params['custom_param'] = 'custom_value';_25_25 return {_25 url,_25 params_25 };_25 }_25}
This is ideal because you can simply re-use all of the logic that Auth Connect is already providing for you and only need to override the methods that need to be changed. This is a great way to get started with a custom provider. If you find that you need to override more and more methods, you may want to consider implementing a completely custom provider.
Creating a Custom Provider
If you find that you need to implement a completely custom provider, you can do so by implementing the AuthProvider abstract class. This class defines all of the methods that Auth Connect expects a provider to implement. You must implement all the required methods, and in each case, you must return the ProviderURLInfo object. You have full control over how to build that object in each case.
_59import { AuthProvider } from '@ionic-enterprise/auth';_59_59export class MyCustomProvider extends AuthProvider {_59 async authorizeRequest(_59 manifest: Manifest,_59 options: ProviderOptions,_59 config: Pick<_59 AuthConnectConfig,_59 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_59 >_59 ) {_59 return {_59 url: '',_59 params: {}_59 }_59 }_59_59 async tokenRequest(_59 manifest: Manifest,_59 options: ProviderOptions,_59 config: Pick<_59 AuthConnectConfig,_59 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_59 >_59 ) {_59 return {_59 url: '',_59 params: {}_59 }_59 }_59_59 async refreshTokenRequest(_59 manifest: Manifest,_59 options: ProviderOptions,_59 config: Pick<_59 AuthConnectConfig,_59 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_59 >_59 ) {_59 return {_59 url: '',_59 params: {}_59 }_59 }_59_59 async logoutRequest(_59 manifest: Manifest,_59 options: ProviderOptions,_59 config: Pick<_59 AuthConnectConfig,_59 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_59 >_59 ) {_59 return {_59 url: '',_59 params: {}_59 }_59 }_59}
The abstract class also provides two helper methods that you can use when generating your requests. The first is checkOrGenerateKeys(config). It will generate a PKCE compliant key and a nonce that you can use for your requests. You should call this anytime you need it and the values will be available as properties on the class instance.
_14async authorizeRequest(_14 manifest: Manifest,_14 options: ProviderOptions,_14 config: Pick<_14 AuthConnectConfig,_14 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_14 >_14) {_14 await this.checkOrGenerateKeys(config);_14 console.log({_14 key: this.key,_14 nonce: this.nonce_14 });_14}
The second helper method is usePKCE(config) which will tell you if PKCE is enabled based on the provided configuration. If you're writing your own provider, this method may be less helpful unless you allow your users to change the auth configuration, as you as the developer would know this value.
_10async authorizeRequest(_10 manifest: Manifest,_10 options: ProviderOptions,_10 config: Pick<_10 AuthConnectConfig,_10 'ios' | 'android' | 'web' | 'platform' | 'logLevel'_10 >_10) {_10 const isPKCE = this.usePKCE(config);_10}
Once you've created your new provider, you can use it in your application same as any existing provider.
_10import { AuthConnect } from '@ionic-enterprise/auth';_10import { MyCustomProvider } from './custom-provider';_10_10async function tryLogin() {_10 const authResult = await AuthConnect.login(new MyCustomProvider(), {...});_10}