React

A React component using the Auth client and loading the message from one of the platform example servers looks like this:

tsx

import { createClient, LoginRequiredError } from '@featherscloud/auth'
import { useEffect, useState } from 'react'

import './App.css'

// Initialize the Feathers Cloud Auth client for your application
const appId = '<your-app-id>'
const auth = createClient({ appId })

async function loadMessage() {
  try {
    // Get data with authentication from your server
    const response = await fetch('http://localhost:3030', {
      headers: {
        Authorization: await auth.getHeader(),
      },
    })
    return response.json()
  }
  catch (error) {
    // Redirect to the login page when login is required
    if (error instanceof LoginRequiredError) {
      window.location.href = await auth.getLoginUrl(error)
    }
    else {
      throw error
    }
  }
}

function App() {
  const [message, setMessage] = useState('')

  useEffect(() => {
    loadMessage().then(({ message }) => setMessage(message))
  }, [message])

  return (
    <>
      <h1>Feathers Cloud Auth React Demo</h1>
      <div className="card">
        <p>The message from the server is:</p>
      </div>
      <h2>{message}</h2>
    </>
  )
}

export default App

You can find the full Vite + React example application here.

React ​

React