Fluent Commerce Docs

Docs

Search

Help & Feedback

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

Content in this track:

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

End Of Track

Content in this track: Accessing User and Location Context with the useAuth Hook

Essential knowledge

Authors:

Cameron Johns, Cille Schliebitz, Anita Gu

Changed on:

3 Feb 2025

Overview

This lesson explores the

`useAuth`

hook provided by the Component SDK, which grants access to crucial information about the currently logged-in user. We'll learn how to retrieve user details, including roles/permissions and the current location/retailer context. Specifically for location-context web apps like Fluent Store, we'll focus on using this hook to access the currently selected store's information, such as longitude and latitude coordinates, which will be essential for our map implementation.

Key points

```
`useAuth`
```
Hook Purpose: The useAuth hook provides a convenient way to access details about the authenticated user, including their roles, permissions, and current context.
Contextual Information: The hook provides access to the user's current location or retailer context, which is vital for location-based applications.
Location Coordinates: For location-context apps, useAuth allows retrieval of the selected store's coordinates (longitude and latitude), enabling map integration and location-based functionality.
Fluent Store Application: In the context of Fluent Store, this hook will be used to get the coordinates of the currently viewed store, providing the data needed to display the store's location on the map.

In this lesson, you will use the

`useAuth`

hook provided by the SDK, which provides details about the logged-in user. This includes details about their current roles/permissions, the location or retailer context they are in, as well as the ability to switch contexts.

In location-context web apps (like Fluent Store), you can use this hook to retrieve information about the currently logged in store location, including longitude and latitude coordinates which will be useful for our map.

Using Hooks

This video explains how to use a hook with the OMX UX Framework

Cameron Johns

Cameron Johns

Contributors:

Knowledge Tracks Related To This Topic

Component SDK

Extending the UX Framework with the Component SDK

Building Custom Components with the Component SDK

Setting Up Your Component SDK Project

Client Scenario: Building a Product Availability Map

Creating and Registering a Custom Component

Configuring Custom Components via the Manifest

Accessing User and Location Context with the useAuth Hook

Integrating a Third-Party Map Component

Adding Nested (Child) Components

Accessing Page Query Data

Style and Theme Your Component

Make Your Component Interactive

Configuring Components with Settings

Configuring Components with Dynamic Attributes

Extending Forms with Custom Field Components

Implementing a Custom Form Field

Enhance Your Custom Fields: Leveraging Existing Components from the Registry

Fetching Data with the useQuery Hook

Completing the Custom Form Field: Outputting the Result

Creating Custom Template Helpers

Unit Testing Custom Components

Deploying a Custom Component Plugin

Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.