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

// 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

1. Signin form

<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>

2. Signup form

<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>