SDK/User Loading States

Overview

Before using the SDK through hooks etc., you need to ensure that it has loaded. In addition, you might also want to wait for a user to have logged in to call certain hooks.

This guide will show you how to check if the SDK has loaded and how to handle the different loading states for the login process.

Wait for SDK to load (variable)

The sdkHasLoaded variable is available from the useDynamicContext hook and can be used to check if the SDK has loaded.

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

const { sdkHasLoaded } = useDynamicContext();

sdkHasLoaded ? console.log("SDK has loaded") : console.log("SDK is still loading");

Check if user is logged in (hook)

The useisloggedin hook will tell you if the user has finished the whole onboarding process i.e. they signed in/up and completed any required information capture.

Note that Dynamic has two modes for a user to be in: connect-only and connect-and-sign (learn more here). In connect-only mode, the user is considered logged in once they have connected their wallet(s) and in connect-and-sign mode, the user is considered logged in once they have connected their wallet(s) and signed a message.

useIsLoggedIn will return true for connect-only when a wallet is connected but there is no UserActivation, and for connect-and-sign when a wallet is connected and a valid user is present.

import { useIsLoggedIn } from '@dynamic-labs/sdk-react-core';

const MyComponent = () => {
  const isLoggedIn = useIsLoggedIn();

  return (
    <div>
      {isLoggedIn ? (
        <p>You are logged in!</p>
      ) : (
        <p>Please log in to continue.</p>
      )}
    </div>
  );
};

export default MyComponent;

Check if user is authenticated but hasn’t finished onboarding

useIsLoggedIn tells you if the user has finished the whole onboarding process, but if you want to know if the user has authenticated but hasn’t finished the process, you can use [userWithMissingInfo] from the useDynamicContext hook.

This will be undefined if the user is not authenticated or if they have finished the onboarding process and will contain the user object otherwise. Conversely, the user object from the same hook will be defined if the user is authenticated and has finished the onboarding process.

import { useDynamicContext, useIsLoggedIn } from '@dynamic-labs/sdk-react-core';

const MyComponent = () => {
  const isLoggedIn = useIsLoggedIn();
  const { userWithMissingInfo } = useDynamicContext();

  let message = "";

  if (userWithMissingInfo) {
    message = "You are authenticated but need to complete the onboarding process.";
  } else if (!isLoggedIn) {
    message = "Please log in to continue.";
  } else {
    message = "You are logged in!";
  }

  return (
    <div>
      <p>{message}</p>
    </div>
  );
};

Access user during login (handler)

The handleAuthenticatedUser handler is a handler that can be used to intercept the workflow once a user has been authenticated but before the auth process completes and we close the UI.

<DynamicContextProvider
  settings={{
    handlers: {
      handleAuthenticatedUser: async (args) => {
        console.log("handleBeforeAuth was called", args);

        await customUserObjectProcess(args.user);
      },
    },
  }}
>
  {/* ... rest of your app ... */}
</DynamicContextProvider>

It gives you a UserProfile object for the given user.

Check when login has started (callback)

The onAuthInit callback gives you information about a login process that has just begun.

<DynamicContextProvider
  settings={{
    events: {
      onAuthInit: (args) => {
        console.log('onAuthInit was called', args);
      }
    }
  }}
>
 {/* ... rest of your app ... */}
</DynamicContextProvider>

Check out the full reference for the return value (args).

Check when authentication has completed (callback)

The onAuthSuccess callback runs once the user has authenticated and is signed in (i.e. completed any mandatory info capture & MFA).

<DynamicContextProvider
  settings={{
    events: {
      onAuthSuccess: (args) => {
        console.log('onAuthSuccess was called', args);
        // you can get the jwt by calling the getAuthToken helper function
        const authToken = getAuthToken();
        console.log('authToken', authToken);
      }
    }
  }}
>
 {/* ... rest of your app ... */}
</DynamicContextProvider>

Check out the full reference for the return value (args).

Check if login failed (callback)

There are two callbacks which you can use for this:

1. The onAuthFailure callback will be called when an authentication process fails, either by error or user closing the modal.
2. The onAuthCancel callback will be called specifically if the modal is closed before login is completed, it is not called on error.