Telco UI Context

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

Usage

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()

Returned Types

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

Utilities

decodeJwt will decode the auth token, returning an AuthPayload object

export type AuthPayload = {
  exp: number
  policySignatures: string[]
  scopes: string[]
  sub: string
}