@gucciogucci/gucci-auth

Gucci Auth

Description

This library is an extension of Okta Auth JS and provides a toolset that facilitates integration with Gucci Sign-in SPA.

Install

To install:

npm install @gucciogucci/gucci-auth // with npm
yarn add @gucciogucci/gucci-auth // with yarn

And import it into your file in this way:

import * as gucciAuth from '@gucciogucci/gucci-auth';

Getting started

init

First of all, you need to run init function passing auth config as first function in order to initialize the library.

import { init } from 'gucciAuth';

// Auth config example
export const authConfig = {
    clientId: '0oa3ks6y7nqRdj8r0000',
    disableHttpsCheck: false,
    issuer: 'https://okta/oauth2/issuer',
    pkce: true,
    redirectUri: 'https://my.site/access/authorization',
    scopes: ['openid', 'profile', 'email']
}

init(authConfig);

getOktaAuth

OktaAuth is the main object that contain all the functionalities of okta-auth-js.

import { init, getOktaAuth } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const oktaAuth = await getOktaAuth();

return oktaAuth;

prepareLogin

PrepareLogin is the main function that permit you to reach login page with pkceConfig embedded in the url.

import { init, prepareLogin } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const callback = (url) => window.location.assign(url);

prepareLogin(callback);

//You can call this function on the click of the login button for example

tokenExchange

TokenExchange is the function that exchange session token with the access token. Is the main function in the okta callback that do the real login.

import { init, tokenExchange } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

const token = await tokenExchange(code);

return token;

/**
If in your authConfig is presents custRefUri and touchpoint the tokenExchange function will call also customer reference in order to set touchpoint

Eg. :

authConfig = {
    clientId: '0oa3ks6y7nqRdj8r0000',
    disableHttpsCheck: false,
    issuer: '---TO-BE-PROVIDED---',
    pkce: true,
    redirectUri: 'https://my.site/access/authorization',
    scopes: ['openid', 'profile', 'email'],
    touchpoint: 'gucci',
    custRefUri: '---TO-BE-PROVIDED---'
}
**/

getPkceConfig

GetPkceConfig is the function that return the config to add in the url before reach sign-in spa. If you use prepareLogin you don't need to call this one. You can extend the pkceConfig passing an object with custom properties. This function set in the local storage the tokens, in order to retrieve it in the callback.

import { init, getPkceConfig } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const pkceConfig = await getPkceConfig({ custom: 'property' });

return pkceConfig;

/**
pkceConfig = {
    custom: 'property',    //this one is the one passed in the arguments
    clientId: '0oa3ks6y7nqRdj8r0000',
    codeChallenge: 'code_challange',
    redirectUri: 'https://my.site/access/authorization'
}
**/

getEncodedPkceConfig

getEncodedPkceConfig is the same of getPkceConfig but returns base64 encoded string

import { init, getEncodedPkceConfig } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const encodedPkceConfig = await getEncodedPkceConfig({ custom: 'property' });

return encodedPkceConfig;

/**
encodedPkceConfig = W29iamVjdCBPYmplY3Rd
**/

closeSession

Function to call to logout that close the session if still alive, remove all the tokens and revoke it. You can pass a callback to execute after the logout.

import { init, closeSession } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const callback = () => console.log('Finished');

closeSession(callback);

/**
Finished
**/

Basic Functionalities

A list of basic functionalities that this library wrap from okta-auth-js

import { init, isSessionExists, revokeToken, getTokenParams } from 'gucciAuth';
import { authConfig } from './authConfig';

init(authConfig);

const session = await isSessionExists();

/**
Check if ther is a session on Okta and return true or false;
**/

await revokeToken();
/**
Revoke all the tokens, and it is included in the closeSession.
See above.
**/

const tokenParams = await getTokenParams();
/**
tokenParams = {
    pkce: true,
    clientId: '0oa3ks6y7nqRdj8r0000',
    redirectUri: '[redirect_test](https://my.site/access/authorization)',
    responseType: '',
    state: '',
    nonce: '',
    scopes: ['openid', 'profile', 'email'],
    ignoreSignature: false,
    issuer: '---TO-BE-PROVIDED---',
    codeChallengeMethod: '',
    codeVerifier: '',
    codeChallenge: 'code_challange'     //This one is important and it's added in the pkceConfig
}
**/

const accessToken = await getAccessToken();

/**
accessToken = {
  accessToken: '',
  claims: {},
  expiresAt: 1650550645,
  tokenType: 'Bearer',
  scopes: [
    email,
    offline_access,
    openid,
    profile
  ],
  authorizeUrl: "",
  userinfoUrl: ""
}
**/

Redirect to a dynamic url

If you are trying to redirect a sign-in to a page like https://gucci.com/web/baa/kr/ko/store/20102, you will find that Okta does not like this kind of dynamic urls, it needs a static redirect.

We want a sign-in url with the parameter returnURI=https://gucci.com/web/baa/kr/it/store/20102 and a pkceConfig like

{
  "clientId": "0oa3ks6y7nqRdj8r0000",
  "codeChallenge": "code_challange",
  "redirectUri": "https://gucci.com/web/baa/access/landing"
}

After the sign-in, Okta will redirect to the redirectUri inside the pkceConfig, and the sign-in-spa will copy the returnURI inside the state parameter, like this:

{
  "checkout": false,
  "rememberMe": true,
  "returnURI": "https://gucci.com/web/baa/kr/ko/store/20102",
  "registration": false,
  "locale": "kr/ko",
  "isSocial": false
}

First, you need to init the gucci-auth as explained before, taking care of including the following parameters:

{
  loginUrl: [login_url]/[country]/[language]/access/view`,
  redirectUri: '[where you want okta to land, it's the redirectUri inside the pkceConfig]',
  customRedirectUri: [where you actuallty want to go after the sign-in, it's the returnURI in the sign-in url and in the state parameter after that]
}

At this point, you can call the prepareLogin inside your code when you want to login as explained before.

You also need to prepare a landing page that will first complete the okta sign-in by calling tokenExchange on the code url parameter, and after that redirect to returnURI inside the state parameter.