website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by
Archbee
Developer Tools
...
Next.js
SDK Reference

useAuth

10min

This page's documentation only applies to Chord's Next.js starter prior to the release of the React. The Next.js starter now uses the React SDK and does not use the methods documented on this page. Check out the React SDK Reference for complete documentation, and the React SDK Migration Guidefor details on how to upgrade.

The useAuth hook returns information about the current authentication session, and functions for logging in and logging out. Chord supports passwordless authentication with Magic.

Example

JS
|
import { useAuth } from '~/hooks/actions'

const AccountPage = () => {
  const { isLoggedIn } = useAuth()
  if (!isLoggedIn) return
  
  // return account page
}


Returns

The useAuth hook returns an object with these properties:

Property

Description

isLoggedIn

A boolean indicating whether the user is currently logged in.

isFetching

A boolean indicating whether the user's authentication status is currently being fetched.

token

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.

getToken

A function that retrieves an authentication token for the current user session.

handleCallback

A function that completes the login process, when the user is redirected back to the site after clicking a link in their email.

login

A function that should be called when a user submits a login form.

logout

A function that terminates the user's current session.

Functions

getToken

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.

Arguments:

None.

Returns:

Promise<void>: A Promise that resolves when the token has been added to the Redux store.

Example:

JS
|
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '~/hooks/actions'

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
}


handleCallback

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.

Arguments:

None.

Returns:

Promise<void>: A Promise that resolves when the token has been added to the Redux store.

Example:

JS
|
import { useEffect } from 'react'
import { useAuth } from '~/hooks/actions'

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

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


login

The login function should be called when a user submits a login form. It will trigger an email to the user for verification.

Arguments:

login({ email, showUI, redirectURI })

Argument

Type

Description

email

String

The user's email address.

showUI?

Boolean (optional, defaults to false)

Controls whether Magic's default UI will display from when login is called until the user clicks the link they've received in an email.

redirectURI?

String (optional, defaults to window.location.href)

The URL that the user will be redirected to when they click the link they've received in an email.

Returns:

Promise<void>

Example:

JS
|
import { useRouter } from 'next/router'
import { useAuth } from '~/hooks/actions'

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
}


logout

The logout function terminates the user's current session.

Arguments:

None.

Returns:

Promise<void>: A Promise that resolves when the session has been cleared.

Example:

JS
|
import { useAuth } from '~/hooks/actions'

const LogoutButton = () => {  
  const { logout } = useAuth()
  
  const handleLogout = async () => {
    try {
      await logout()
    } catch(error) {
      console.error('Logout unsuccessful.')
    }
  }
  
  return <button onClick={handleLogout}>Logout</button>
}




Updated 03 Mar 2023
Did this page help you?
PREVIOUS
useAnalytics
NEXT
useCart
Docs powered by
Archbee
TABLE OF CONTENTS
Example
Returns
Functions
getToken
handleCallback
login
logout
Docs powered by
Archbee