
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@gucciogucci/gucci-auth
Advanced tools
This library is an extension of Okta Auth JS and provides a toolset that facilitates integration with Gucci Sign-in SPA.
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';
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
**/
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: ""
}
**/
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.
FAQs
Gucci auth
The npm package @gucciogucci/gucci-auth receives a total of 0 weekly downloads. As such, @gucciogucci/gucci-auth popularity was classified as not popular.
We found that @gucciogucci/gucci-auth demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.