Interface WebAuthClient

The Vincent Web Application Client is used in web apps to handle interactions with the Vincent app portal.

  • Connect page redirection
  • Authentication helpers that are browser specific
interface WebAuthClient {
    decodeVincentJWT: (
        expectedAudience: string,
    ) => null | { decodedJWT: VincentJWTAppSpecific; jwtStr: string };
    uriContainsVincentJWT: () => boolean;
    redirectToConnectPage: (
        redirectConfig: RedirectToVincentDelegationPageParams,
    ) => void;
    removeVincentJWTFromURI: () => void;
}

Properties

decodeVincentJWT uriContainsVincentJWT redirectToConnectPage removeVincentJWTFromURI

Properties

decodeVincentJWT

decodeVincentJWT: (
    expectedAudience: string,
) => null | { decodedJWT: VincentJWTAppSpecific; jwtStr: string }

Extracts a decoded/parsed Vincent JWT (JSON Web Token) from the current window location

The token is verified as part of this process; if the token is invalid or expired, this method will throw.

See: WebAuthClient.redirectToConnectPage for example usage

Type declaration

    • (
          expectedAudience: string,
      ): null | { decodedJWT: VincentJWTAppSpecific; jwtStr: string }

    • Parameters

      • expectedAudience: string

        Provide a valid redirectUri for your app; this is typically your app's origin

      Returns null | { decodedJWT: VincentJWTAppSpecific; jwtStr: string }

      null if no JWT is found, otherwise both the decoded jwt and the original JWT string is returned

Function

Throws

If there was a JWT in the page URL, but it was invalid / could not be verified

uriContainsVincentJWT

uriContainsVincentJWT: () => boolean

Determines whether the current window location is a connect URI associated with Vincent

You can use this to detect if a user is loading your app as a result of approving permissions on the Vincent Connect page -- e.g. they just logged in

See: WebAuthClient.redirectToConnectPage for example usage

Type declaration

    • (): boolean

    • Returns boolean

      true if the current window URI is a connect URI, otherwise false.

Function

redirectToConnectPage

redirectToConnectPage: (
    redirectConfig: RedirectToVincentDelegationPageParams,
) => void

Redirects the user to the Vincent Connect page.

If the user approves your app permissions, they will be redirected back to the redirectUri.

Use WebAuthClient.uriContainsVincentJWT to detect if a user has just opened your app via the Connect page

Use WebAuthClient.decodeVincentJWT to decode and verify the VincentJWT from the page URI, and store it for later usage

NOTE: You must register the redirectUri on your Vincent app for it to be considered a valid redirect target

Example

import { getWebAuthClient } from '@lit-protocol/vincent-app-sdk/webAuthClient';

const vincentAppClient = getWebAuthClient({ appId: MY_APP_ID });
// ... In your app logic:
if(vincentAppClient.uriContainsVincentJWT()) {
  // Handle app logic for the user has just logged in
  const { decoded, jwtStr } = vincentAppClient.decodeVincentJWT(EXPECTED_AUDIENCE);
  // Store `jwtStr` for later usage; the user is now logged in.
} else {
  // Handle app logic for the user is already logged in (check for stored & unexpired JWT)
  // ...
   *   // Handle app logic for the user is not yet logged in
 vincentAppClient.redirectToConnectPage({ redirectUri: window.location.href });
}

Function

removeVincentJWTFromURI

removeVincentJWTFromURI: () => void

Removes the Vincent connect JWT from the current window URI.

This is useful for cleaning up the URL after decoding and storing the JWT, ensuring the redirect URL looks clean for the user and no sensitive information is exposed in the URI.

Example

import { getWebAuthClient } from '@lit-protocol/vincent-app-sdk/webAuthClient';

const vincentAppClient = getWebAuthClient({ appId: MY_APP_ID });

if (vincentAppClient.uriContainsVincentJWT()) {
  const { decodedJWT, jwtStr } = vincentAppClient.decodeVincentJWT();
  // Store the JWT and use it for authentication

  // Now we can remove the JWT from the URL searchParams
  vincentAppClient.removeVincentJWTFromURI();
}

Function

Settings

On This Page

Properties