Single Sign-On SSO | Openid Connect

Description

This is an openid connect app that provides single sign on authentication and authorization with following frameworks or technologies

• Koa js
• O365 authentication (outlook)
• MongoDB
• Typescript,Eslint,Prettier.
• oidc-provider

Local Setup

Running the development server

    npm ci
    npm run oidc

SSO Dashboard

• All the apps registered with sso are shown on the dashboard.
• well known configuration {domain}/.well-known/openid-configuration
• client registration

const oidcconfig = {
  client_id: 'app1',
  client_secret: 'app1',
  redirect_uris: ['http://localhost:5002/dashboard'],
  grant_types: ['authorization_code', 'password', 'refresh_token', 'client_credentials'],
};

To learn more about how we registered clients in oidc please checkout Documentation of oidc-povider

Integrating SSO in Applications

• react
• Next
• angular
• dotnet
• java

Example - 1: Pure HTTP flow

Client config:

  authority: "http://localhost:3000",
  client_id: "2ExTRs2cGWY52OLXmhvRT",
  client_secret: "FDODTVuysemAtArh5PNkpDxVAwxW662-avsdEnqb2_z9ps15YJ77jhEGEkvxdHocItitYKyhmnTwpAH7q8VUtA",
  redirect_uri: "http://localhost:9009/auth",
  scope: "openid profile email",
  response_type: "code",

Define following example values

    state: "a86ee06e549343d4bcf8e355746d0718" // random 32 chars to track the session
    code_verifier: "d59b916c6da1411998fd9959f9f6ad87efa798f47c46402c9b3034a792d716579c6082d0854c49338f4109741dbbce4c", // random base64 string
    code_challenge: "Vrj3PBm2ATIX36dvWPbo2UqTqCz20uo9e-x00v16aLY" // hash of code_verifier using 'code_challenge_method' in base64 string format
    code_challenge_method: 'S256' // hashing algorithm

Initiate auth flow

    GET /auth?client_id=2ExTRs2cGWY52OLXmhvRT&redirect_uri=http%3A%2F%2Flocalho%3A9009%3Aauth&response_type:code&scope=openid+profile+email&state=a86ee06e549343d4bcf8e355746d0718&code_challenge=Vrj3PBm2ATIX36dvWPbo2UqTqCz20uo9e-x00v16aLY&code_challenge_method=S256&response_mode=query

Optional query params:

• resource: to bind the access token to that resource, it will be known from token introspection end point response aud. if you specify, it won't allow userinfo(/me) end point on the resulted access token.

After user successfully authenticated, OIDC will redirect to redirect_uri with query (code, state and iss) example:

    http://localhost:4000/auth?code=YC6YhoiEIE--ofAWkzpfiUI0dAdX3quLqmrtDYccYD0&state=a86ee06e549343d4bcf8e355746d0718&iss=http%3A%2F%2Flocalhost%3A4001%2Foidc

Get access token from api token end point

    POST /token
    Accept: application/json
    Content-Type: application/x-www-form-urlencoded
    
    code=YC6YhoiEIE--ofAWkzpfiUI0dAdX3quLqmrtDYccYD0&code_verifier=d59b916c6da1411998fd9959f9f6ad87efa798f47c46402c9b3034a792d716579c6082d0854c49338f4109741dbbce4c&grant_type=authorization_code&redirect_uri=http%3A%2F%2Flocalhost%3A9009&client_id=2ExTRs2cGWY52OLXmhvRT&client_secret=FDODTVuysemAtArh5PNkpDxVAwxW662-avsdEnqb2_z9ps15YJ77jhEGEkvxdHocItitYKyhmnTwpAH7q8VUtA

Token introspection

    POST /introspect HTTP/1.1
    Accept: application/json
    Content-Type: application/x-www-form-urlencoded

    token=2YotnFZFEjr1zCsicMWpAA
    client_id=2ExTRs2cGWY52OLXmhvRT
    client_secret=FDODTVuysemAtArh5PNkpDxVAwxW662-avsdEnqb2_z9ps15YJ77jhEGEkvxdHocItitYKyhmnTwpAH7q8VUtA,

Example 2: React App integration

react-oidc-context

const oidcConfig = {
  authority: `${sso_url}`,
  client_id: `app1`,
  client_secret: `some-secret`,
  redirect_uri: `http://localhost:5002/dashboard`,
  scope: 'openid email profile phone address offline_access api:read',
  resource: `http://localhost:4000`,
  useRefreshToken: true,
  responseType: 'code',
  renewTimeBeforeTokenExpiresInSeconds: 10,
  silentRenewTimeoutInSeconds: 20,
  silentRenew: true,
  userStore: new WebStorageStateStore({
    store: storeuser,
  }),
  onSigninCallback: (_user: any) => {
    console.log('onSigninCallback', _user);
  },
};

To learn more about react-oidc-context please refer Documentation

Example 3: Next App integration

Next auth library

{
    id: 'auth0',
    clientId: "quixr",
    clientSecret: "quixr",
    issuer: `${sso_url}`,
    name: 'auth0',
    type: 'oauth',
    resource:"http://localhost:4000",
    wellKnown: "{sso_url}/.well-known/openid-configuration",
    token: '{sso_url}/token',
    authorization: { params: { scope: 'openid email profile' }},
    userinfo: `${sso_url}/me`,
    checks: ['pkce', 'state'],
    idToken: true,
    profile(profile: any,tokens:TokenSet) {
      return {
        id:  profile.sub,
        name: profile.sub,
        email: profile.sub,
      };
    }
}

To learn more about Next auth Library please checkout Documentation

Future Work

• role level access
• app level access
• user-level request authorization ( rp token)