This repository is a simple package that allows frontend devs to interact with the Terra Login API, by fetching and posting any type of stringified information.

Usage

This package should be accompanied by:

"@dynamic-labs/sdk-react-core": "x.x.x",

And then optionally by any of the following chains that the frontend might want to support.

"@dynamic-labs/solana": "x.x.x",
"@dynamic-labs/cosmos": "x.x.x",
"@dynamic-labs/ethereum": "x.x.x", # EVMs

Basic Example

The login functionality is supported by a Provider that should wrap around the components that need to interact with the Terra Login API.

It should always be supplied with an environmentId and a list of wallet connectors that the frontend wants to support.

The core functionality of the login provider is the eventsCallbacks field, which allows the frontend to define custom behavior for events that happen during the login process.

Below is an example of setting a callback function for the onAuthSuccess event, which is triggered when the user successfully logs in. In this case, after a user logs in, the frontend will use this package to login into our API, and then use the token we return to fetch the user's session information.

import { getLoginAuthToken, getPulsarUserInfo } from '@terra-money/login-sdk'

import { CosmosWalletConnectors } from '@dynamic-labs/cosmos'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'

<DynamicContextProvider
    settings={{
    eventsCallbacks: {
        onAuthSuccess: async (args) => {
        const { authToken } = args
        const loginToken = await getLoginAuthToken(authToken)
        const userInfo = await getEnterpriseUserInfo(loginToken)
        const session = JSON.parse(userInfo)
        // Do something with the session here
        },
    },
    environmentId: 'your-environment-id',
    walletConnectors: [
        CosmosWalletConnectors,
        SolanaWalletConnectors,
        EthereumWalletConnectors,
    ],
    }}
>
    {children}
</DynamicContextProvider>

Documentation for DynamicContextProvider can be found here, to see additional props that can be passed to the Provider, which include fields that allow filtering of available wallets to login, set logo images, and more.

Additional documentation for the eventsCallbacks field can be found here.

After setting up the provider, the DynamicWidget button can be placed anywhere in the app to trigger the login process.

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

<DynamicWidget />

These two components are the only ones needed to set up the login functionality in a frontend app. The DynamicWidget button will trigger the login process, and the DynamicContextProvider will handle the login events and provide the frontend with the necessary information to interact with the Terra Login API.

When a user logs in, this information is persisted in the browser, but onAuthSuccess is only triggered once, at the moment of login. If after that, you want to fetch the user's authToken again, you can use the getAuthToken function from the @dynamic-labs/sdk-react-core package.

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

const authToken = getAuthToken()

Additional hooks exist to interact with the Provider, such as useIsLoggedIn and useUserWallets, which can be used to check if a user is logged and to get the wallets that the user has connected, respectively.