@xterio-sdk/auth v0.0.16

• @xterio-sdk/auth
  • 1. Install
  • 2. Usage
  • 3. How to get userinfo
    • XterioAuth.userinfo (not recommend)
    • XterioAuth.getUserInfo((info) => {})
    • XterEventEmiter.subscribe((info) => {})
  • 4. API Reference
    • 4.1 Method
      • init(config: Partial<ISSoTokensParams>, env?:Env)
      • login(mode?: LoginType)
      • logout()
      • getIdToken()
      • getOtac()
      • getUserInfo(p:Function)
      • openPage(page:PageType, mode?:OpenPageMode, options?:PageOptionParam)
    • 4.2 Property
      • isLogin
      • userinfo
      • loginMethod
      • loginWalletAddress
    • 4.3 EventEmiter
      • subscribe(callback:Func, _event?: string)
      • off/on(event:string, callback:Func)
      • clear()
  • 5. Interface/Type
    • ISSoTokensParams
    • Env
    • LoginType
    • OpenPageMode
    • PageType
    • PageOptionParam
    • LoginMethodType

@xterio-sdk/auth

1. Install

npm install @xterio-sdk/auth | yarn add @xterio-sdk/auth | pnpm add @xterio-sdk/auth

2. Usage

import '@xterio-sdk/auth/style/main.css'
import { XterioAuth, XterEventEmiter } from '@xterio-sdk/auth'

//1. Initialize only once
const redirect_uri = ''
const client_id = ''
const client_secret = ''
const app_id = ''
XterioAuth.init({app_id, client_id, client_secret, redirect_uri })

//2. Register to listen for user information
const unsubscribe = XterEventEmiter.subscribe(info=>{
  //subscribe
  console.log('info=', info)
})

unsubscribe() //unsubscribe

//or

XterEventEmiter.unsubscribe()//unsubscribe all account event

//3. SignIn
XterioAuth.login()
...

3. How to get userinfo

XterioAuth.userinfo (not recommend)

XterioAuth.getUserInfo((info) => {})

//example
XterioAuth.getUserInfo((info) => {
  //info:IUserInfo
})

XterEventEmiter.subscribe((info) => {})

//example1
const unsubscribe = XterEventEmiter.subscribe((info: IUserInfo) => {
  updateInfo(info)
})

//example2
const unsubscribe = XterEventEmiter.subscribe<IUserInfo>((info) => {
  updateInfo(info)
})

4. API Reference

4.1 Method

init(config: Partial<ISSoTokensParams>, env?:Env)

Initialize Function，View the detailed configuration of ISSoTokensParams

XterioAuth.init({
  app_id:'',
  client_id:'',
  client_secret:'',
  redirect_uri:'',
  //sso login mode, the value of 'default'|'email'
  //the default value is 'default'
  mode:'default',
  //sso login whether logout when login, the value of '1'|'0'
  //the default value is '1'
  logout:'1',
  //the log level, close all console(>=5)，open all log(<=1)
  //the default value is 1
  logLevel: 1
}, Env.Dev)

login(mode?: LoginType)

login xterio, View the detailed configuration of LoginType

XterioAuth.login() //default: LoginType.Default
XterioAuth.login(LoginType.Email)
XterioAuth.login(LoginType.Mini)

logout()

quit xterio

XterioAuth.logout()

getIdToken()

check whether the idToken is valid. If the idToken is invalid, empty string is returned, else the non-empty str.

XterioAuth.getIdToken() //Promise<string>

getOtac()

XterioAuth.getOtac() //Promise<string>

getUserInfo(p:Function)

get userinfo with callback

//example
XterioAuth.getUserInfo((info) => {
  //info:IUserInfo
})

openPage(page:PageType, mode?:OpenPageMode, options?:PageOptionParam)

default mode: OpenPageMode.alert，View the detailed configuration of PageOptionParam 、PageType、OpenPageMode

//example1: page:asset, mode:alert
XterioAuth.openPage(PageType.asset, OpenPageMode.popup, {
  active: 'ingame',
  popupConfig: {
    placement: 'center',
    showCloseIcon: false,
    style:{
      width: '200px',
      height: '200px',
      marginTop: "20px"
    }
  }
  //...
})

//example2: page:settings, mode:page
XterioAuth.openPage(PageType.setting, OpenPageMode.page, {
  tab: 'account',
  XterViewCustomOptions: {
    hide_wallet_entrance: true,
    //...
  }
})

//example3: page:marketplace, mode:iframeDom
await XterioAuth.openPage(PageType.nft_market, OpenPageMode.iframeDom, {
  //...
  keyword: '',
  collection: '',
  // features: [{ k: '', initValues: [], type: '' }],
  features: [{ k: "rarity", initValues: ["SR", "R"]}],
  // features: [{ k: "score", initValues: [0, 64]}],
  
}) //return: domNode

//example4: page:collection, mode:iframeUri
await XterioAuth.openPage(PageType.nft_collection, OpenPageMode.iframeUri, {
  //...
  collection: '',
  features: [{ k: '', initValues: [], type: '' }]
}) //return: uri

4.2 Property

isLogin

whether to log in

XterioAuth.isLogin //boolean

userinfo

get xterio user information

XterioAuth.userinfo

loginMethod

get user logined method，it's type is LoginMethodType LoginMethodType

XterioAuth.loginMethod //LoginMethodType

loginWalletAddress

get user logined wallet address

XterioAuth.loginWalletAddress //string

4.3 EventEmiter

subscribe(callback:Func, _event?: string)

//subscribe userinfo
const unsubscribe = XterEventEmiter.subscribe(()=>{}) //default: XTERIO_EVENTS.ACCOUNT

//unsubscribe userinfo(this userinfo event)
unsubscribe()

//unsubscribe userinfo(all userinfo event)
XterEventEmiter.unsubscribe() //default: XTERIO_EVENTS.ACCOUNT

off/on(event:string, callback:Func)

const cb = (info) => {
  console.log('emiter auth userinfo==', info)
}
XterEventEmiter.on(cb, 'event_name')
XterEventEmiter.off(cb, 'event_name')

clear()

clear all listeners

5. Interface/Type

ISSoTokensParams

export interface ISSoTokensParams {
  app_id: string
  client_id: string
  client_secret: string
  redirect_uri: string
  response_type: string //value: 'code'
  scope: string //value: 'all'
  mode: 'default' | 'email' //default: 'default'
  grant_type: string //value: 'authorization_code'
  logout?: '0' | '1' //default: '1'
  logLevel?: number //default: 1
}

Env

export enum Env {
  Dev = 'Dev',
  Staging = 'Staging',
  Production = 'Production'
}

LoginType

export enum LoginType {
  Default = 'default',
  Email = 'email',
  Mini = 'mini'
}

OpenPageMode

export enum OpenPageMode {
  popup = 'popup', //open popup
  page = 'page', //open new page
  iframeDom = 'dom', //return iframe dom
  iframeUri = 'url' //return url
}

PageType

export enum PageType {
  asset = 'asset',
  nft_market = 'nft_marketplace',
  nft_collection = 'nft_collection',
  setting = 'setting'
}

PageOptionParam

export interface PageOptionParam {
  /** only settings page */
  tab?: 'profile' | 'account' | 'wallet' | 'security'
  /** only asset page */
  active?: 'ingame' | 'onchain'
  /** only nft market page */
  keyword?: string
  /** only nft page, required when nft_collection */
  collection?: string
  /** only nft page */
  features?: { k: string; initValues: (number | string)[]; type?: string }[]
  /** set xterio page layout options */
  XterViewCustomOptions?: Partial<XterViewCustomizeOptions>
  /** set alert configs */
  popupConfig?: Partial<PagePopupConfig>
}
export type BooleanOrBinary = boolean | 1 | 0
export interface PagePopupConfig {
  placement: 'left' | 'right' | 'center'
  style: Partial<CSSStyleDeclaration>
  showCloseIcon?: boolean
}
export interface XterViewCustomizeOptions {
  /** whether hide wallet entry */
  hide_wallet_entrance?: BooleanOrBinary
  /** whether hide account */
  hide_account_entrance?: BooleanOrBinary
  /** whether hide menu, only h5 usage */
  hide_menu_entrance?: BooleanOrBinary
  /** whether hide logout btn */
  hide_sign_out?: BooleanOrBinary
  /** whether hide header */
  hide_header?: BooleanOrBinary
  /** whether hide footer */
  hide_footer?: BooleanOrBinary
  /** whether disable logo click event */
  disable_logo_click?: BooleanOrBinary
  /** whether hide game select, only asset page */
  hide_game_select?: BooleanOrBinary
  /** whether hide game tokens, only asset page */
  hide_game_tokens?: BooleanOrBinary
  /** whether hide game filter, only nft page */
  hide_game_filter?: BooleanOrBinary
}

LoginMethodType

export enum LoginMethodType {
  Email = 'email', //email
  Teleg = 'Telegram', //tg

  //wallet way
  METAMASK = 'METAMASK',
  // COINBASE = 'COINBASE',
  WALLETCONNECT = 'WALLET CONNECT',
  TRUST = 'TRUST',
  SAFEPAL = 'SAFEPAL',
  // OKX = "OKX",
  BINANCE = 'BINANCE',
  BYBIT = 'BYBIT',

  //social way
  Google = 'google',
  Facebook = 'facebook',
  Discord = 'discord',
  Twitter = 'twitterv2'
}