Guides

Auth Integration

Setting up your auth integration enables impersonation via a single click.

Setting it up only takes a few minutes and will require some light code changes.

To begin, head over to your dashboard settings and click on the "Setup Auth Integration" button

There are 2 main forms of auth integration, mainly:

Supabase (recommended)
Custom

Supabase Integration

Supabase (recommended)

Integrating auth with Supabase is the easiest way to get started.

A Supabase account will be required.

JWT Secret required

You will need to get your JWT Secret from your Supabase dashboard from the following URL (replace {PROJECT_ID} with your Supabase project ID):

https://supabase.com/dashboard/project/{PROJECT_ID}/settings/api

Alternatively, from your Supabase project home go to Project Settings API JWT Settings.

Click on the "Reveal" button and copy the JWT secret. We will be using it shortly.

In Prudent dashboard

After clicking on Setup Auth button, select "Supabase Auth"
Fill in your (1.) JWT Secret key which you obtained earlier and (2.) the Redirect URL and click on "Save"
What is Redirect URL for?
The redirect URL tells Prudent where to redirect the user to after we have minted the login token for them.
Typically, this would be your app frontend.
You're done with the set up on the Prudent dashboard side, congrats! 🎉
When your support team member clicks on the login-as button, they will be redirected to the url that you have specified along with the user JWT in the query params.
e.g. https://example.com/dashboard?prudent-actor-id=impersonated-jwt-login-token
We will next go over how to use the JWT in your app.

Query param renaming

By default, Prudent will send the user JWT in the query under the query name "prudent-actor-id".

If you want to change this, you can rename it by specifying your preferred name in the Auth Query Param field during setup.

In your app codebase

You may want to refer your developer to handle this part.

When creating Supabase client on your frontend, retrieve the JWT from the query param and set it inside the client options.

import { createClient } from '@supabase/supabase-js'

// Retrieve JWT from query parameters
const queryParams = new URLSearchParams(window.location.search)
const prudent_access_token = queryParams.get('prudent-actor-id');

createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  global: {
    headers: {
      // Manually set the access token when it can be retrieved from query parameters.
      ...(prudent_access_token ? {Authorization: `Bearer ${prudent_access_token}`} : undefined)
    }
  }
})

You're done with Supabase integration! 🎉

Custom Integration

Custom

With custom integration, you can decide how you want the auth process to be like when your support team member logs in as an app user.

In Prudent dashboard

After clicking on Setup Auth button, select "Custom Auth"
Fill in your the Redirect URL and click on "Save"
What is Redirect URL for?
The redirect URL tells Prudent where to redirect the user to after they have clicked on the "Login as" button.
Typically, this would be one of your API endpoints that can provision a valid session token e.g. https://example.com/api/auth
You're done with the set up on the Prudent dashboard side, congrats! 🎉
We will next go over how to handle an impersonation request on your API side.

In your app codebase

You may want to refer your developer to handle this part.

Inside your API auth route, you will need to handle impersonation request redirection from Prudent.

Here is an example using in NextJS serverless function

import { type NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  // Get impersonation id
  const searchParams = request.nextUrl.searchParams
  const impersonationRequestId = searchParams.get('prudent-actor-id')

  // Get impersonation data
  const res = await fetch('https://prod.getprudent.co/api/v1/user-apis/impersonation-requests/${impersonationRequestId}')
  const impersonationData = (await res.json()) as {
    id: string;
    createdAt: string;
    updatedAt: string;
    status: 'PENDING' | 'APPROVED' | 'REJECTED';
    title: string;
    details: string;
    idOfUserBeingImpersonated: string;
    durationInSeconds: number | null;
    startAt: Date | null;
    metadata: Record<string, any> | null;
  }

  // Log user in as `idOfUserBeingImpersonated`
  const { idOfUserBeingImpersonated } = impersonationData

  // The remainder of the code assumes that your app is using session cookie.
  // Please adapt the following code to suit any alternative auth logic that your app uses.
  // If you are unsure of how to integrate with your auth system, please contact us for help.

  // Create a token for the impersonated user (this is just an example, implement your token generation logic)
  const token = await createTokenForUser(idOfUserBeingImpersonated)

  // Set redirect url
  const response = NextResponse.redirect('https://example.com/dashboard')

  // Set the session cookie
  response.cookies.set('session', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    path: '/',
    maxAge: impersonationData.durationInSeconds || 3600, // default to 1 hour if no duration is specified
  })

  return response
}

You're done with Custom integration! 🎉