Gazelle authentication library

Gazelle Auth lib is a library of reusable authentication components for React applications. This library aims to provide a set of well-designed and accessible components to speed up the development process and ensure consistency across the Gazelle application.

This library is intended to be used with Next.js application.

Installation

You can install the gazelle-auth-lib package via npm or yarn:

npm install gazelle-auth-lib
# or
yarn add gazelle-auth-lib

Usage

To use the components from gazelle-auth-lib in your React application, import the desired component and use it like any other React component.

example of command to add the library to your package.json :

npm install gazelle-auth-lib --save

Configuration

Once the library is added, you need to add the following files to your applications :

# HTTP API (used by client component to retrieve some data)
/app/api/auth/[...nextauth]/route.ts
/app/api/auth/[...nextauth]/authOption.ts
/app/api/getOrganization/[organizationId]/route.ts
/app/api/getUserById/route.ts
/app/api/getUserPicture/route.ts

# next-auth configuration
/middleware.ts
/next-auth.d.ts

You also need to add the following dependency to your pom.xml

"next-auth": "^4.24.10",

Environment variables

To work with your application properly at runtime, you must provide the following environment variable when you start your application :

| Variable | Description | Required | Example | |----------------------|---------------------------------|----------|---------------------------------------------| | NEXT_PUBLIC_BASE_URL | The base url of the application | YES | http://localhost:3000/home | | GZL_GUM_API_URL | The api url if the GUM api | YES | https://localhost:8080/gum/rest | | GZL_GUM_UI_URL | The api url if the GUM api | YES | https://localhost:8080/gum-ui | | NEXTAUTH_URL | The next-auth api url | YES | http://localhost:3000/home/api/auth/ | | NEXTAUTH_SECRET | The next-auth keycloak secret | YES | secret | | KEYCLOAK_ISSUER | The keycloak issuer | YES | http:///localhost:28080/auth/realms/gazelle | | KEYCLOAK_CLIENT_ID | The keycloak client ID | YES | OIDC_GAZELLE_CLIENT |

Publish the library

In order to use this library in all other Next-JS projects, we need to publish the components on a registry.

As image registry, we are using https://www.npmjs.com.

Prerequisites

• Check that you are authenticated to the registry (npm whoami), if not, use the command npm adduser.

• Check the version in your package.json. You can't push a library on an existing version.

Usage

You can publish the new version to the registry with the command :

npm publish

Once the library is pushed, you can go to your Next-JS application to change the library version in the package.json. Execute the npm install command. You can now use the components you developped.