@tria-sdk/authenticate

The @tria-sdk/authenticate module facilitates user onboarding for your dapp by providing support for social (e.g., Google, Facebook), mobile, email, and @tria and password signup and logins.

Installation

npm i -f @tria-sdk/authenticate@latest
npm i -f @tria-sdk/connect@latest

React JS (all versions)

Create a .npmrc and add the following:

//registry.npmjs.org/:_authToken=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
registry=https://registry.npmjs.org/

Inside your app.js:

import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside your login component :

import Application from "@tria-sdk/authenticate"

In your login component, add this inside return :

<Application
	  logo="your_logo" //example: "https://fusion_x.logo.svg"
	  dappName="your_dapp_name" //example: "Fusion X"
	  dappDomain={window.parent.origin}
	  primaryColor="your_dapp_primary_color" //example: "#FFFFFF"
	  defaultChain="your_desired_default_chain" //example: "FUSE"
	  supportedChains={["chain1", "chain2"]} //example: {["POLYGON", "MUMBAI"]}
	  uiType="yes" // for external wallets 	
	  darkMode = {true} //for enabling dark mode
          buttonPosition={x:200, y:200} //for draggable wallet
/>

Next JS ( for versions higher than 13.0.0)

Create a .npmrc and add the following:

//registry.npmjs.org/:_authToken=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
registry=https://registry.npmjs.org/

Inside next.config.js :

const nextConfig = {
      experimental: {
        esmExternals: "loose",
    },
};

Inside app.js (in case Next JS App Directory is disabled)


import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside page.js (in case Next JS App Directory is enabled)


import { useTriaConnector } from "@tria-sdk/connect";

const { globalData } = useTriaConnector({ authUrl: "https://auth.tria.so", walletUrl:"https://wallet.tria.so" });

Inside your login component :

"use client"; //add this to the top of your login component

const Application = dynamic(
    () => import("@tria-sdk/authenticate"),
    { ssr: false }
)

In your login component, add this inside return :

<Application
	  logo="your_logo" //example: "https://fusion_x.logo.svg"
	  dappName="your_dapp_name" //example: "Fusion X"
	  dappDomain={window.parent.origin}
	  primaryColor="your_dapp_primary_color" //example: "#FFFFFF"
	  defaultChain="your_desired_default_chain" //example: "FUSE"
	  supportedChains={["chain1", "chain2"]} //example: {["POLYGON", "MUMBAI"]}
	  uiType="yes" // for external wallets 	
	  darkMode = {true} //for enabling dark mode
          buttonPosition={x:200, y:200} //for draggable wallet
/>

Need support? Join our Discord, or send us an email at [email protected].