Trimble Identity SDK for React app.
🚀 Getting Started - 📚 Usage Reference - 💬 Support
Using npm in your project directory run the following command:
npm install @trimble-oss/trimble-id-reactCreate a new application in the Trimble Developer Console portal and configure the following settings:
To register your application in Trimble Developer Console:
-
On the left pane select "Applications".
-
On the Applications home page, in the top right corner select + NEW APPLICATION. The Create Application page displays.
-
Select Continue to enter the applications details.
Field Description Name Name of your application Description Provide a description for the application. -
Configure OAuth application grant types as
Authorization Code GrantandUse Refresh tokensin order to use this SDK. -
Configure the desired
callback URLandlogout URLfor your application. These URLs are used by the SDK to redirect the user after authentication. -
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.
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.
- 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)
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
Use the useAuth hook in your components to access authentication state (isLoading, isAuthenticated, user, error) and authentication methods (loginWithRedirect and logout):
Redirect the user to TID using the browser
const {loginWithRedirect}= useAuth()
await loginWithRedirect()const {logout}= useAuth()
await logout()True if the user is authenticated.
const {isAuthenticated}= useAuth()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()Gets the access token from cache. SDK handles token refresh when token expires.
const {getAccessTokenSilently}= useAuth()
var access_token = await getAccessTokenSilently()Information of the user in session
const {user}= useAuth()
var name = user?.nameProperty that let the developer know if an error happen during the authentication
const {error}= useAuth()
var error = error.messageIt 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.
See here for Sample Code for reference.
See here for releases
To provide feedback or report a bug, please raise an issue on our issue tracker.
Send email to support@trimble.com