Vulpo Auth

Vulpo Auth

The client side web SDK's enable you to quickly integrate a complete authentication solution, requiring minimal configuration.

The client SDK's are split up into three packages

  1. The core TypeScript SDK
  2. A React SDK
  3. A prebuilt React UI

Get Started with the prebuilt React UI

Before you start, make sure you have a local instance of the Vulpo auth server running. Follow the instructions here

Given a fresh instalation of create-react-app.

  1. Install the package
npm install @vulpo-dev/auth-ui react-router-dom
  1. Set up the client:
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
import { Auth as AuthCtx } from '@vulpo-dev/auth-react'
import { Auth } from '@vulpo-dev/auth-sdk'
import '@vulpo-dev/auth-ui/styles.css'

let AuthClient = Auth.create({
// You'll find the ID under your project settings
project: '<project-id>',
baseURL: ''

let container = document.getElementById('root')
let root = createRoot(container) // createRoot(container!) if you use TypeScript

<AuthCtx.Provider value={AuthClient}>
<App />
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
  1. Update your App.js component to make use of the AuthShell:
import React from 'react'
import { Route, Link } from 'react-router-dom'
import { AuthShell, useUser } from '@vulpo-dev/auth-ui'

let App = () => {
return (
<Route path='/' element={<WithUser />} />
<Route path='page' element={
<Link to="/">Page</Link>
} />
export default App

let WithUser = () => {
let user = useUser()
return (

<h1>With User </h1>
<Link to="page">Page</Link>
<pre>{JSON.stringify(user, null, 2)}</pre>

Generated using TypeDoc