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.


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


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


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 (
<AuthProvider {...authService}>{children}</AuthProvider>

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?