// Add this import line at the top
import { TBTCUserAuthenticator } from "tbtc-sdk-react";

//Success callback
const onSigninSuccess = async (data) => {
  console.log(data);
};

<TBTCUserAuthenticator 
  groups="group1" 
  onSigninSuccess={onSigninSuccess}
  signup={true}
  styles={{tbtcSdkInput: { height: "55px" }}}
  userManagementApiBase="https://user-dev.beartiger.io" />

need to insert valid group name, for inserting multiple groups use comma as a seperator
onSigninSuccess is the login success callback, authentication token will be passed to this callback

We can apply styling using styles props which is an object {"dom class name": {/React CSS object/}} Property name is camel case from of css class name and value is React CSS object. (https://reactjs.org/docs/dom-elements.html#style) Code example

{tbtcSdkInput: { height: "55px" }, "tbtcSdkBtn": {color: 'red'}}

UI structure

<div class="tbtc-sdk-wrapper">
  <div>
    <form novalidate="">
      <div class="tbtc-sdk-input-wrapper">
        <input
          required=""
          type="email"
          name="email"
          class="tbtc-sdk-input"
          value=""/>
          <span>EMAIL</span>
      </div>
      <div class="tbtc-sdk-input-wrapper">
        <input
          required=""
          type="password"
          name="password"
          class="tbtc-sdk-input"
          value=""/>
          <span>PASSWORD</span>
      </div>
      <div class="tbtc-sdk-forgot-password-wrapper">
        <div>
          <a class="tbtc-sdk-forgot-password-link" href="/">
            Forgotten password?
          </a>
        </div>
      </div>
      <div class="tbtc-sdk-button-wrapper">
        <button class="tbtc-sdk-btn">Signin</button>
        <button class="tbtc-sdk-btn">Signin With Wallet</button>
        <button class="tbtc-sdk-btn">Signup</button>
      </div>
    </form>
  </div>
</div>

<div class="tbtc-sdk-wrapper">
  <form novalidate="">
    <div class="tbtc-sdk-input-wrapper">
      <input
        required=""
        type="email"
        name="email"
        class="tbtc-sdk-input"
        value=""/>
        <span>EMAIL</span>
    </div>
    <div class="tbtc-sdk-input-wrapper">
      <input
        required=""
        type="text"
        name="name"
        class="tbtc-sdk-input"
        value=""/>
        <span>NAME</span>
    </div>
    <div class="tbtc-sdk-input-wrapper">
      <input
        required=""
        type="text"
        name="familyName"
        class="tbtc-sdk-input"
        value=""/>
        <span>SURNAME</span>
    </div>
    <div class="tbtc-sdk-input-wrapper">
      <input
        type="text"
        name="phoneNumber"
        class="tbtc-sdk-input"
        value=""/>
        <span>PHONE NUMBER</span>
    </div>
    <div class="tbtc-sdk-input-wrapper">
      <input
        required=""
        type="password"
        name="password"
        class="tbtc-sdk-input"
        value=""/>
        <span>PASSWORD</span>
    </div>
    <div class="tbtc-sdk-input-wrapper">
      <input
        required=""
        type="password"
        name="confirmPassword"
        class="tbtc-sdk-input"
        value=""/>
        <span>CONFIRM PASSWORD</span>
    </div>
    <div class="tbtc-sdk-button-wrapper">
      <button class="tbtc-sdk-btn">Signup</button>
      <button class="tbtc-sdk-btn">Signup With Wallet</button>
      <button class="tbtc-sdk-btn">Signin</button>
    </div>
  </form>
</div>

3. Forgot Password form

<div class="tbtc-sdk-input-wrapper">
  <input
    required=""
    type="email"
    name="email"
    class="tbtc-sdk-input"
    value=""/>
    <span>EMAIL</span>
</div>

4. Forgot Password Confirmation form

<div class="tbtc-sdk-wrapper">
  <p class="tbtc-sdk-email-confirmation-message">
    Please check you email and put the confirmation code.
  </p>
  <div class="tbtc-sdk-input-wrapper">
    <input
      required=""
      type="email"
      name="email"
      class="tbtc-sdk-input"/>
      <span>EMAIL</span>
  </div>
  <div class="tbtc-sdk-input-wrapper">
    <input
      required=""
      type="password"
      name="password"
      class="tbtc-sdk-input"
      value=""/>
      <span>NEW PASSWORD</span>
  </div>
  <div class="tbtc-sdk-input-wrapper">
    <input
      required=""
      type="text"
      name="code"
      class="tbtc-sdk-input"
      value="">
      <span>CODE</span>
  </div>
  <div class="tbtc-sdk-code-submit-wrapper">
    <button class="tbtc-sdk-btn">Submit</button>
    <button class="tbtc-sdk-btn">Signin</button>
  </div>
</div>

5. Account Confirmation form

<div class="tbtc-sdk-wrapper">
  <p class="tbtc-sdk-confirmation-message">
    Please check you email and put the confirmation code.
  </p>
  <div class="tbtc-sdk-input-wrapper">
    <input
      required=""
      type="email"
      name="email"
      class="tbtc-sdk-input"
      value=""
    />
    <span>EMAIL</span>
  </div>
  <div class="tbtc-sdk-input-wrapper">
    <input
      required=""
      type="text"
      name="code"
      class="tbtc-sdk-input"
      value=""
    />
    <span>CODE</span>
  </div>
  <div class="tbtc-sdk-code-submit-wrapper">
    <button class="tbtc-sdk-btn">Submit</button>
    <a class="tbtc-sdk-resend-confirmation-code-link" href="/">
      Resend Confirmation Code
    </a>
  </div>
</div>

FAQs

What is tbtc-sdk-react?

Is tbtc-sdk-react popular?

Is tbtc-sdk-react well maintained?

Last updated on 03 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket

tbtc-sdk-react

tbtc-sdk-react

1. Install the TBTC SDK

npm install tbtc-sdk-react

2. Dependencies

For integrating Welletconnect the package required react-scripts version 4.0.3 ("react-scripts": "4.0.3")

2. Set up TBTC Authenticator

UI structure

1. Signin form

2. Signup form

3. Forgot Password form

4. Forgot Password Confirmation form

5. Account Confirmation form