@trimble-oss/trimble-id-react

Trimble Identity SDK for React app.

🚀 Getting Started - 📚 Usage Reference - 💬 Support

Getting Started

Installation

Using npm in your project directory run the following command:

npm install @trimble-oss/trimble-id-react

Configure Trimble Identity

Create a new application in the Trimble Developer Console portal and configure the following settings:

To register your application in Trimble Developer Console:

1. On the left pane select "Applications".

2. On the Applications home page, in the top right corner select + NEW APPLICATION. The Create Application page displays.

3. Select Continue to enter the applications details.

   | Field | Description | | ----------- | ----------- | | Name | Name of your application | | Display Name| Provide a display name of the application. | | Description | Provide a description for the application. |

4. Configure OAuth application grant types as Authorization Code Grant and Use Refresh tokens in order to use this SDK.

5. Configure the desired callback URL and logout URL for your application. These URLs are used by the SDK to redirect the user after authentication.

6. Select "Create Application" to save changes.

Take note of the Client ID and URLs under the "Basic Information" section. You'll need these values to configure the SDK.

Scopes

Trimble Identity uses scopes to determine the aud claim in the returned access token. Scope is mandatory for the application to work. You can use the scope as the application name registered in the Trimble Developer Console. For example, if you have registered an application with the name "test", then it must be registered in the format {some_uuid}-"test". For eg., 12345678-1234-1234-1234-123456789012-test.

For more information, see Authentication documentation.

Usage Reference

Configure the SDK

SDK provides a React component TID Provider that will handle the process related to the authentication for you. Configure the SDK by wrapping your application in TIDProvider:

<TIDProvider tidClient={new TIDClient(config)} onRedirectCallback={handleRedirect}>
    <Component/>
</TIDProvider> 

Here TIDProvider can take two parameters :

• tidClient : TID client instance. You can send an instance of the TID Client if you want to handle the initialization yourself
• onRedirectCallback - When the redirect callback occur this function will be call once the user is login using the TIDClient. This could allow you to redirect the user into another page after the login happen.

After wrapping your app with the TIDProvider, you have to configure the TID credentials registered in TrimbleCloud console. There are two ways of doing this:

1. Using the TIDClient

<TIDProvider tidClient={new TIDClient({
    config: {
        configurationEndpoint: "<OAUTH_WELL_KNOWN_URL>",
        clientId: "CLIENT_ID",
        redirectUrl: "http://localhost:3000/callback",
        logoutRedirectUrl: "http://localhost:3000/logout-callback",
        scopes: ['test']
    },
    persistentOptions: {
      persistentStore: "localStorage"
  }
  })} onRedirectCallback={handleRedirect}>
    <Component/>
</TIDProvider>

2. You can send the properties directly

<TIDProvider
    configurationEndpoint={"<OAUTH_WELL_KNOWN_URL>"}
    clientId={"CLIENT_ID"}
    redirectUrl={"http://localhost:3000/callback"}
    logoutRedirectUrl={"http://localhost:3000/logout-callback"}
    scopes={['test']}
    persistentStore ={"localStorage"}
    onRedirectCallback={handleRedirect}>
        <Component/>
</TIDProvider>

Below are the parameters of TIDClient.

1. TID Client configurations:

• ConfigurationEndpoint : The URL for the Trimble Identity OpenID well known configuration endpoint Production: https://id.trimble.com/.well-known/openid-configuration
• clientId : Client id of the application created in Trimble Developer Console
• redirectUrl : The URL to which Trimble Identity should redirect after successfully authenticating a user
• logoutRedirectUrl : The URL to which Trimble Identity should redirect after successfully logout a user
• scopes : The type of credentials you want (openID, or application_name)

2. PersistentOptions configuration

Type of persistence you want the user and token to be store

• in-memory - This one will only persist will the user stays in the page. By default, persistence will be in-memory.
• localStorage - This persistent doesn't have expiration date
• sessionStorage - This one is cleared when the page session ends

NOTE: localStorage and sessionStorage will be removed in future releases due to security concerns. Using localStorage and sessionStorage for storing sensitive information poses several security risks, including vulnerability to XSS attacks, lack of secure attributes, persistent storage, and session hijacking. Please plan to use in-memory option.

useAuth

Use the useAuth hook in your components to access authentication state (isLoading, isAuthenticated, user, error) and authentication methods (loginWithRedirect and logout):

loginWithRedirect

Redirect the user to TID using the browser

const {loginWithRedirect}= useAuth()
await loginWithRedirect()

logout

const {logout}= useAuth()
await logout()

isAuthenticated

True if the user is authenticated.

const {isAuthenticated}= useAuth()

isLoading

This property will indicate the developer that the TID Provider is still loading information from the cache By default, this state will be true, this will allow the developers to handle async functionality Note: This property will only be true the first time that the app executes.

const {isLoading}= useAuth()

getAccessTokenSilently

Gets the access token from cache. SDK handles token refresh when token expires.

const {getAccessTokenSilently}= useAuth()
var access_token = await getAccessTokenSilently()

getTokens

Gets the token details from cache.

const {getTokens}= useAuth()
var tokenResponse : TokenResponse = await getTokens()

user

Information of the user in session

const {user}= useAuth()
var name = user?.name

error

Property that let the developer know if an error happen during the authentication

const {error}= useAuth()
var error = error.message

AuthenticationGuard

It renders a component if the user is authenticated, otherwise redirects the user to the login page. It can be used to protect private components. If the user is not authenticated, they will be redirected to the login page.

<AuthenticationGuard renderComponent={() => <MyPrivateComponent/>}/>

NOTE: Refer samples for better understanding.

Sample Code

See here for Sample Code for reference.

Release notes

See here for releases

Raise an issue

To provide feedback or report a bug, please raise an issue on our issue tracker.

Support

Send email to [email protected]