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.
Updated about 2 months ago