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 = nullreturn {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 outreturn () => {// 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?