Skip to main content
Version: 6.x

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


_25
import { Auth0Provider } from '@ionic-enterprise/auth';
_25
_25
export 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.


_59
import { AuthProvider } from '@ionic-enterprise/auth';
_59
_59
export 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.


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


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


_10
import { AuthConnect } from '@ionic-enterprise/auth';
_10
import { MyCustomProvider } from './custom-provider';
_10
_10
async function tryLogin() {
_10
const authResult = await AuthConnect.login(new MyCustomProvider(), {...});
_10
}