Authenticate

Setup

By default, we will authenticate users which means users will need to sign on every connection. This means, that you don't need to set any prop to automatically authenticate users.

That being said, you can explicitly control the settings using the initialAuthenticationMode prop and setting the value to connect-and-sign.

initialAuthenticationMode (optional)

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

<DynamicContextProvider
  settings={{
    initialAuthenticationMode: 'connect-and-sign',
    ...
  }}
>
  {...}
</DynamicContextProvider>

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

<DynamicContextProvider
  settings={{
    initialAuthenticationMode: 'connect-and-sign', // this is the default option
    ...
  }}
>
  {...}
</DynamicContextProvider>

Usage

useAuthenticateConnectedUser

If you elect to avoid authentication initially by using connect-only, but at some point you want to authenticate your connected users (ie, prove ownership of the wallet), then you can call authenticateUser to trigger a sign request.

You can check the boolean isAuthenticating to check on the status of a user that is authenticating which will be either true or false.

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

const Element = () => {
  const { user } = useDynamicContext();
  const { authenticateUser, isAuthenticating } = useAuthenticateConnectedUser();

  if (!user) {
    return (
      <button onClick={authenticateUser} disabled={isAuthenticating}>
        Authenticate user
      </button>;
    )
  }

  return <div>User is authenticated!</div>;
};

Example

This video below shows our demo site. Here we start with a connected user who has not yet authenticated. We call the authenticateUser method and signature request appears. Once the user signs, then Dynamic verifies the signature and returns a JWT.