Interfaces
Interface: UseAuth<AuthClientType>

﻿react-autonomy﻿.UseAuth
UseAuth contains the data and methods returned by useAuth﻿.
Type parameters
Name
Type
AuthClientType
extends AuthClient﻿ = any
Properties
getToken
• getToken: () => Promise<string>
Type declaration
▸ (): Promise<string>
The getToken function retrieves an authentication token for the current
user session, and adds it the Redux store. While you are unlikely to need the
token directly, since the SDK automatically appends it to relevant Chord API
requests, you can use this function to check whether the user's session is
still active. If the user's session has expired, getToken will throw an
error.
You may choose to call getToken on page load or when a user visits
a protected route (like an account page) to check that their session has not
expired since the last time you checked.
﻿
Here is how to use getToken to create a route that is only accessible if
the user is logged in in a Next.js app.
JS
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '@chordcommerce/react-autonomy'

const PrivateRoute = ({ children }) => {
  const { getToken, isLoggedIn, isFetching } = useAuth()
  const router = useRouter()

  useEffect(() => {
    const checkStatus = async () => {
      try {
        await getToken()
      } catch (error) {
        router.push('/login')
      }
    }

    if (!isLoggedIn) checkStatus()
  }, [isLoggedIn, getToken, router])

  if (!isLoggedIn && isFetching) {
    // return loading animation
  }

  if (!isLoggedIn && !isFetching) {
    //return null
  }

  return children
}
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '@chordcommerce/react-autonomy'

const PrivateRoute = ({ children }) => {
  const { getToken, isLoggedIn, isFetching } = useAuth()
  const router = useRouter()

  useEffect(() => {
    const checkStatus = async () => {
      try {
        await getToken()
      } catch (error) {
        router.push('/login')
      }
    }

    if (!isLoggedIn) checkStatus()
  }, [isLoggedIn, getToken, router])

  if (!isLoggedIn && isFetching) {
    // return loading animation
  }

  if (!isLoggedIn && !isFetching) {
    //return null
  }

  return children
}
﻿
Returns
Promise<string>
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:143﻿
﻿
handleCallback
• handleCallback: () => Promise<void>
Type declaration
▸ (): Promise<void>
The handleCallback function completes the login process, when the user is
redirected back to the site after clicking a link in their email. The SDK
calls this function automatically when the Magic url parameter is detected on
page load, so you are unlikely to need to call this function.
﻿
JS
import { useEffect } from 'react'
import { useAuth } from '@chordcommerce/react-autonomy'

const Page = ({ children }) => {
  const { handleCallback } = useAuth()

  useEffect(() => {
    const handle = async () => {
      try {
        await handleCallback()
      } catch (error) {
        console.error('Invalid callback token.')
      }
    }
    handle()
  }, [])

  // return page
}
import { useEffect } from 'react'
import { useAuth } from '@chordcommerce/react-autonomy'

const Page = ({ children }) => {
  const { handleCallback } = useAuth()

  useEffect(() => {
    const handle = async () => {
      try {
        await handleCallback()
      } catch (error) {
        console.error('Invalid callback token.')
      }
    }
    handle()
  }, [])

  // return page
}
﻿
Returns
Promise<void>
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:174﻿
﻿
isFetching
• isFetching: boolean
A boolean indicating whether the user's authentication status is currently
being fetched.
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:82﻿
﻿
isLoggedIn
• isLoggedIn: boolean
A boolean indicating whether the user is currently logged in.
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:86﻿
﻿
login
• login: (options: Login﻿) => Promise<void>
Type declaration
▸ (options): Promise<void>
The login function should be called when a user submits a login form. It
will trigger an email to the user for verification.
﻿
JS
import { useRouter } from 'next/router'
import { useAuth } from '@chordcommerce/react-autonomy'

const LoginForm = () => {
  const { login } = useAuth()
  const router = useRouter()

  const onSubmit = async ({ email }) => {
    try {
      await login({ email })
      router.push('/some-private-route')
    } catch (error) {
      console.error('Login unsuccessful.')
    }
  }

  // return login form
}
import { useRouter } from 'next/router'
import { useAuth } from '@chordcommerce/react-autonomy'

const LoginForm = () => {
  const { login } = useAuth()
  const router = useRouter()

  const onSubmit = async ({ email }) => {
    try {
      await login({ email })
      router.push('/some-private-route')
    } catch (error) {
      console.error('Login unsuccessful.')
    }
  }

  // return login form
}
﻿
Parameters
Name
Type
options
﻿Login﻿﻿
Returns
Promise<void>
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:202﻿
﻿
logout
• logout: () => Promise<void>
Type declaration
▸ (): Promise<void>
The logout function terminates the user's current session.
﻿
JS
import { useAuth } from '@chordcommerce/react-autonomy'

const LogoutButton = () => {
  const { logout } = useAuth()

  const handleLogout = async () => {
    try {
      await logout()
    } catch(error) {
      console.error('Logout unsuccessful.')
    }
  }

  return <button onClick={handleLogout}>Logout</button>
}
import { useAuth } from '@chordcommerce/react-autonomy'

const LogoutButton = () => {
  const { logout } = useAuth()

  const handleLogout = async () => {
    try {
      await logout()
    } catch(error) {
      console.error('Logout unsuccessful.')
    }
  }

  return <button onClick={handleLogout}>Logout</button>
}
﻿
Returns
Promise<void>
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:226﻿
﻿
serviceClient
• serviceClient: ReturnType<AuthClientType["getServiceClient"]>
The underlying instance of the AuthClient provided to ChordProvider﻿.
Allows for lower level operations with the authentication provider that
might be needed.
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:92﻿
﻿
token
• token: string
A string representing the user's authentication token. This token is
automatically appended to Chord OMS API requests when the user has an
active session.
Defined in
﻿packages/react-autonomy/src/hooks/use-auth.ts:77﻿
Name	Type
AuthClientType	extends AuthClient = any
Name	Type
options	Login
Updated 25 Mar 2024
Interface: UseAnalytics
Interface: UseCart