Custom auth service

How to create a custom auth service

The AuthProvider allows you to configure custom auth services. This is useful if you have a custom auth solution, or if you want to use a different auth service than the ones provided by Saas UI.

An AuthService is simply a function that returns the configuration for the AuthProvider.

Example AuthService#

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

type CustomUser = {
  email: string
}

export const createAuthService = (): AuthProviderProps<CustomUser> => {
  let user: CustomUser | null = null
  return {
    onLogin: async (params: AuthParams) => {
      if (params.email) {
        user = { email: params.email }
        return user
      }
    },
    onSignup: async (params: AuthParams) => {
      if (params.email) {
        user = { email: params.email }
        return user
      }
    },
    onVerifyOtp: async (params: AuthParams) => {
      return true // check if params.otp is valid
    },
    onLogout: async () => {
      user = null
    },
    onAuthStateChange: (callback) => {
      // Set up and event handler that calls `callback(user)` with the current user or undefined if the user is logged out
      return () => {
        // Remove the event handler
      }
    },
    onLoadUser: async () => {
      return user
    },
    onGetToken: async () => {
      // return a session token if it's supported.
      return null
    },
    onResetPassword: async (params: AuthParams) => {
      // send a reset password email
    },
    onUpdatePassword: async (params: AuthParams) => {
      // update the user's password, eg after sending a reset password email
    },
  }
}

After creating your service you can pass it to the AuthProvider:

import { AuthProvider } from '@saas-ui/auth'
import { createAuthService } from './auth-service'

const authService = createAuthService()

const App = ({ Component, pageProps }) => {
  return (
    <AuthProvider {...authService}>
      <Component {...pageProps} />
    </AuthProvider>
  )
}

Passing properties to the AuthService#

Since the auth service is just a function, you can pass properties to it:

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

type CustomUser = {
  email: string
}

type AuthServiceProps = {
  redirectUrl: string
}

export const createAuthService = (
  props: AuthServiceProps
): AuthProviderProps<CustomUser> => {
  return {
    onLogin: async (params: AuthParams) => {
      login({
        redirectUrl: props.redirectUrl,
        // ...
      })
      // ...
    },
  }
}

And in your app:

import { AuthProvider } from '@saas-ui/auth'
import { createAuthService } from './auth-service'

const authService = createAuthService({
  redirectUrl: 'https://my-app/auth/callback',
})

What's next?#

Was this helpful?