Auth0

Integrating Auth0 authentication with Saas UI.

This integration allows you to connect Auth0 with the Saas UI auth screens and provider.

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. Your users can log in with either a username and password, or with a social login like Google or Facebook.

The Auth0 integration uses the @auth0/auth0-spa-js package and uses log in screens hosted by Auth0 and therefor doesn't support the Saas UI auth screens.

install#

yarn add @saas-ui/auth0 @auth0/auth0-spa-js

Import#

import { createAuthService } from '@saas-ui/auth0'

Usage#

Setup AuthProvider#

import { Auth } from '@auth0/auth0-spa-js'
import { AuthProvider } from '@saas-ui/auth'
import { createAuthService } from '@saas-ui/auth0'


const auth0client = new Auth0Client({
  domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN!,
  clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID!,
})


const authService = createAuthService(auth0client)


function App({ children }) {
  return (
    <SaasProvider>
      <AuthProvider {...authService}>{children}</AuthProvider>
    </SaasProvider>
  )
}

Loggin in#

Calling logIn will redirect the user to the Auth0 login screen.

import { useAuth } from '@saas-ui/auth'


function Login() {
  const { logIn } = useAuth()


  return <button onClick={logIn({})}>Login</button>
}

That's it! Check the Auth Provider documentation to see learn how to use the useAuth hooks.

Was this helpful?