Connect and Sign

Setup

By default, we will authenticate users which means users will need to sign on every connection. This page describes how you can control whether you want to authenticate on each connection or if you want to allow users to connect only first and then optionally authenticate at a later time.

You can control which settings you prefer by using the initialAuthenticationMode prop and setting the value to connect-only or you can explicitly call connect-and-sign.

initialAuthenticationMode (optional)

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

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

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

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

enableVisitTrackingOnConnectOnly (optional)

If you are using the connect-only mode, then you also have the option to disable visitor tracking by setting enableVisitTrackingOnConnectOnly to false.

If you set this to false then we will not track visitors. Note that you will not be able to see visitor information in our visitors table or analytics page.

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

<DynamicContextProvider
  settings={{
    initialAuthenticationMode: 'connect-only',
    enableVisitTrackingOnConnectOnly: false,
    ...
  }}
>
  {...}
</DynamicContextProvider>

Usage

useAuthenticateConnectedUser

If you elect to avoid authentication initially by using connect-only, and 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.