id: oidc title: OIDC tags:

• cordova
• capacitor
• ionic
• javascript
• typescript
• plugin
• oidc
• auth

OIDC

Online documentation

Github documentation

Installation

Cordova

cordova plugin add https://github.com/mi-corporation/cordova-plugin-oidc-basic.git --variable ANDROID_REDIRECT_SCHEME=com.example.myapp
npm install @awesome-cordova-library/oidc

Capacitor / Ionic

npm install https://github.com/mi-corporation/cordova-plugin-oidc-basic.git
npm install @awesome-cordova-library/oidc
npx cap sync

Vanilla

Declaration

export declare type OIDCRequest = {
  configuration: {
    authorizationEndpoint: string;
  };
  clientId: string;
  scope: string;
  state: string;
  redirectUrl: string;
  responseType: string;
  accesTokenExpirationDate: number;
  tokenType: string;
  idToken: string;
  additionalParameters: string;
  nonce: string;
  codeVerifier: string;
  codeChallenge: string;
  codeChallengeMethod: string;
  error: string;
  errorDescription: string;
  errorUrl: string;
  idTokenHint: string;
  postLogoutRedirectUrl: string;
};
export declare type ErrorType = {
  UNSENDABLE_REQUEST: 'OIDC_UNSENDABLE_REQUEST';
  ERROR_RESPONSE: 'OIDC_ERROR_RESPONSE';
  INVALID_RESPONSE: 'OIDC_INVALID_RESPONSE';
  HTTP_ERROR: 'OIDC_HTTP_ERROR';
  USER_CANCELLED: 'OIDC_USER_CANCELLED';
  UNEXPECTED_ERROR: 'OIDC_UNEXPECTED_ERROR';
};
/**
 * @author AZOULAY Jordan<[email protected]>
 * OIDC Cordova plugin
 * Also, check out {@link https://github.com/mi-corporation/cordova-plugin-oidc-basic Github}
 * @requires module:https://github.com/mi-corporation/cordova-plugin-oidc-basic.git
 */
export default class OIDC {
  static presentAuthorizationRequest(
    req: Partial<OIDCRequest>,
    success: (response: Partial<OIDCRequest>) => void,
    error: (error: { message: string; oidcType: string; oidcDetails: string; oidcResponse: string }) => void,
  ): void;
  static presentEndSessionRequest(
    req: Partial<OIDCRequest>,
    success: (response: Partial<OIDCRequest>) => void,
    error: (error: { message: string; oidcType: string; oidcDetails: string }) => void,
  ): void;
  static warnPluginIsUnInstallOrIncompatible(): void;
}

Usages

import OIDC from '@awesome-cordova-library/oidc';
var req = {
  configuration: {
    authorizationEndpoint: 'https://my-authorization-endpoint/authorize',
  },
  clientId: 'my-client-id',
  scope: 'openid',
  state: 'my-state', // or leave absent and the plugin will generate random state by default
  redirectUrl: 'my-redirect-url', // see notes on redirectUrl below
  responseType: 'code', // authorization code flow
};
// Initiate authorization request
OIDC.presentAuthorizationRequest(
  req,
  function (resp) {
    // Success
    // Use the following info to perform your token request:
    // resp.authorizationCode -- The authorization code
    // resp.request.codeVerifier -- The codeVerifier. Generated by the plugin (currently no option to pass in or disable PKCE). Needed as part of the token request.
    // resp.request.nonce -- The nonce. Generated by the plugin (currently no option to pass in or disable). Needed as part of ID token validation.
  },
  function (err) {
    // Error. Inspect err.oidcType to see what kind. See below for more on errors and error types.
    // Example of handling a specific error type:
    if (err.oidcType === cordova.plugins.oidc.basic.ErrorType.USER_CANCELLED) {
      // User cancelled the authorizationr request
    }
    // Can handle other error types as needed
  },
);

React

Declaration

const useOIDC: () => {
  presentAuthorizationRequest: (req: Partial<OIDCRequest>) => Promise<Partial<OIDCRequest>>;
  presentEndSessionRequest: (req: Partial<OIDCRequest>) => Promise<Partial<OIDCRequest>>;
};

Usages

import { useMemo } from 'react';
import useOIDC from '@awesome-cordova-library/oidc/lib/react';

function App() {
  const req = useMemo(
    {
      configuration: {
        authorizationEndpoint: 'https://my-authorization-endpoint/authorize',
      },
      clientId: 'my-client-id',
      scope: 'openid',
      state: 'my-state', // or leave absent and the plugin will generate random state by default
      redirectUrl: 'my-redirect-url', // see notes on redirectUrl below
      responseType: 'code', // authorization code flow
    },
    [],
  );
  const { presentAuthorizationRequest } = useOIDC();

  return (
    <button
      onClick={() =>
        presentAuthorizationRequest(req)
          .then((resp) => {
            // Success
            // Use the following info to perform your token request:
            // resp.authorizationCode -- The authorization code
            // resp.request.codeVerifier -- The codeVerifier. Generated by the plugin (currently no option to pass in or disable PKCE). Needed as part of the token request.
            // resp.request.nonce -- The nonce. Generated by the plugin (currently no option to pass in or disable). Needed as part of ID token validation.
          })
          .catch((err) => {
            // Error. Inspect err.oidcType to see what kind. See below for more on errors and error types.
            // Example of handling a specific error type:
            if (err.oidcType === cordova.plugins.oidc.basic.ErrorType.USER_CANCELLED) {
              // User cancelled the authorizationr request
            }
            // Can handle other error types as needed
          })
      }
    >
      Login
    </button>
  );
}