Socket
Socket
Sign inDemoInstall

tbtc-sdk-react

Package Overview
Dependencies
258
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

tbtc-sdk-react

## 1. Install the TBTC SDK ##### npm install tbtc-sdk-react


Version published
Maintainers
1
Weekly downloads
6
increased by500%

Weekly downloads

Readme

Source

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>

FAQs

Last updated on 03 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc