Telco UI Context provides access to information regarding authentication, such as the JWT token, as well as anything passed down from the CRM when an app is hosted within a CRM iframe.
NOTE: this package is intended for use with the
crm-contribution-framework
and does NOT work with cerdo/frames
Wrap your app with the provider, passing in optional valid auth scopes.
import * as React from 'react'
import ReactDOM from 'react-dom'
import { TelcoUIProvider } from '@utilitywarehouse/telco-ui-material'
import { TelcoContextProvider } from '@utilitywarehouse/telco-ui-context'
import App from './components/App'
ReactDOM.render(
<TelcoContextProvider validScopes={window.VALID_SCOPES}>
<TelcoUIProvider>
<App />
</TelcoUIProvider>
</TelcoContextProvider>,
document.getElementById('root')
)
In your app you can now use the useTelcoContext
hook.
const { authenticated, error } = useTelcoContext()
The useTelcoContext
hook returns the following typed object.
export type TelcoContextValue = {
authenticated: boolean
username: string
userEmail: string
token: string
logout: () => void
error?: string
crmAccount: CrmAccount
}
export type CrmAccount = {
number: string
id: string
}
-
authenticated
indicates whether a users login has been authenticated. Use this when rendering within the CRM to know when to start rendering your app, otherwise there may be unnecessary re-renders -
username
is the authenticated users username, derived from their email address -
userEmail
is the users email address, derived from the auth token -
token
is the JWT, either returned from Google auth or passed down from the CRM -
logout
is a function that will clear the users JWT from local storage and log them out of the app -
error
will be any errors returned from the authentication process -
crmAccount
is an object containing account information passed down from the CRM host, specifically the account number & id
decodeJwt
will decode the auth token, returning an AuthPayload
object
export type AuthPayload = {
exp: number
policySignatures: string[]
scopes: string[]
sub: string
}