React Native Accounts SDK

Updated on 21 Oct 2024
9 Minutes to read
Contributors

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

Accounts SDK

Accounts SDK React Native (iOS)

Create a new .swift file, the name in this guide is "AccountsSDK" but call it whatever you like

If it is the first time making a .swift file, Xcode will prompt you to make a Bridging-Header.h file, press "Create Bridging Header"

A Bridging-Header.h will expose Objective-C public headers to Swift

In [PROJECT-NAME]-Bridging-Header.h file add

#import <React/RCTBridgeModule.h>

In yourAccountsSDK.swift create a class and extend NSObject like below (you can remove the auto-generated Foundation import):

@objc(AccountsSDK)
class AccountsSDK: NSObject {


}

Make sure to include @objc(AccountsSDK) above the class to expose it to an Objective-C implementation file we will make later

import TicketmasterAuthentication which should have been made available after adding the Ticketmaster Frameworks

import TicketmasterAuthentication

Below are the Account SDK methods that React Native will call, you can add the desired methods to your AccountsSDK class and update them to your needs

@objc(AccountsSDK)
class AccountsSDK: NSObject  {


  @objc public func configureAccountsSDK(_ resolve: @escaping (String) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {
      // build a combination of Settings and Branding
      let tmxServiceSettings = TMAuthentication.TMXSettings(apiKey: "[API_KEY]",
                                                            region: .US)

      let branding = TMAuthentication.Branding(displayName: "My Team",
                                               backgroundColor: .red,
                                               theme: .light)

      let brandedServiceSettings = TMAuthentication.BrandedServiceSettings(tmxSettings: tmxServiceSettings,
                                                                           branding: branding)

      // configure TMAuthentication with Settings and Branding
      print("Accounts SDK Configuring...")

      TMAuthentication.shared.configure(brandedServiceSettings: brandedServiceSettings) { backendsConfigured in
        // your API key may contain configurations for multiple backend services
        // the details are not needed for most common use-cases
        print(" - Accounts SDK Configured: \(backendsConfigured.count)")
        resolve("Accounts SDK configuration successful")

      } failure: { error in
        // something went wrong, probably the wrong apiKey+region combination
        print(" - Accounts SDK Configuration Error: \(error.localizedDescription)")
        reject( "Accounts SDK Configuration Error:", error.localizedDescription, error as NSError)
      }
  }


  @objc public func login(_ resolve: @escaping ([String: Any]) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {

    TMAuthentication.shared.login { authToken in
      print("Login Completed")
      print(" - AuthToken: \(authToken.accessToken.prefix(20))...")
      let data = ["accessToken": authToken.accessToken]
      resolve(data)
    } aborted: { oldAuthToken, backend in
      let data = ["accessToken": ""]
      resolve(data)
      print("Login Aborted by User")
    } failure: { oldAuthToken, error, backend in
      print("Login Error: \(error.localizedDescription)")
      reject( "Accounts SDK Login Error", error.localizedDescription, error as NSError)
    }
  }


  @objc public func logout(_ resolve: @escaping (String) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {
    // logout of all accounts, not just the accounts in the current configuration
    TMAuthentication.shared.logoutAll {backends in
      resolve("Logout Successful")
      print("Logout Completed")
      print(" - Backends Count: \(backends?.count ?? 0)")
    }
  }

  @objc public func refreshToken(_ resolve: @escaping ([String: Any]) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {

    TMAuthentication.shared.validToken { authToken in
      print("Token Refreshed (if needed)")
      print(" - AuthToken: \(authToken.accessToken.prefix(20))...")
      let data = ["accessToken": authToken.accessToken]
      resolve(data)
    } aborted: { oldAuthToken, backend in
      print("Refresh Login Aborted by User")
      let data = ["accessToken": ""]
      resolve(data)
    } failure: { oldAuthToken, error, backend in
      print("Refresh Error: \(error.localizedDescription)")
      reject( "Accounts SDK Refresh Token Error", error.localizedDescription, error as NSError)
    }
  }

  @objc public func getMemberInfo(_ resolve: @escaping ([String: Any]) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {

    TMAuthentication.shared.memberInfo { memberInfo in
      print("MemberInfo Completed")
      print(" - UserID: \(memberInfo.localID ?? "<nil>")")
      print(" - Email: \(memberInfo.email ?? "<nil>")")
      print(memberInfo)
      let data = ["globalUserId": memberInfo.globalID, "memberId": memberInfo.localID,  "hmacId": memberInfo.hmacID, "firstName": memberInfo.firstName, "lastName": memberInfo.lastName, "email": memberInfo.email, "phone": memberInfo.phone, "preferredLang": memberInfo.language]
      resolve(data as [String : Any])
    } failure: { oldMemberInfo, error, backend in
      print("MemberInfo Error: \(error.localizedDescription)")
      reject( "Accounts SDK Member Info Error", error.localizedDescription, error as NSError)
    }
  }

  @objc public func getToken(_ resolve: @escaping ([String: Any]) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {
    TMAuthentication.shared.validToken(showLoginIfNeeded: false) { authToken in
      print("Token Retrieved")
      let data = ["accessToken": authToken.accessToken]
      resolve(data)
    } aborted: { oldAuthToken, backend in
      print("Token Retrieval Aborted ")
      let data = ["accessToken": ""]
      resolve(data)
    } failure: { oldAuthToken, error, backend in
      print("Token Retrieval Error: \(error.localizedDescription)")
      reject( "Accounts SDK Token Retrieval Error", error.localizedDescription, error as NSError)
    }
  }

  @objc public func isLoggedIn(_ resolve: @escaping ([String: Bool]) -> Void, reject: @escaping (_ code: String, _ message: String, _ error: NSError) -> Void) {
    TMAuthentication.shared.memberInfo { memberInfo in
      let hasToken = TMAuthentication.shared.hasToken()
      resolve(["result": hasToken])

    } failure: { oldMemberInfo, error, backend in
      if(TMAuthentication.shared.hasToken()){
        let hasToken = TMAuthentication.shared.hasToken()
        resolve(["result": hasToken])
      } else {
        reject("Accounts SDK Is Logged In Error", error.localizedDescription, error as NSError)
      }
    }
  }
}

Replace [APIKEY] in configureAccountsSDK() with your API key through your developer account

The last step before you can call this method in React Native is to write an implementation file in Objective-C which will register these modules and methods to React Native

Create a .m file called AccountsSDK.m (or whatever appropriate) and past in the below

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(AccountsSDK, NSObject)


- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

+ (BOOL)requiresMainQueueSetup {
  return true;
}

RCT_EXTERN_METHOD(configureAccountsSDK: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(login: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(logout: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(refreshToken: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(getMemberInfo: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(getToken: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)

RCT_EXTERN_METHOD(isLoggedIn: (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)


@end

dispatch_get_main_queue is a callback for secondary threads to inform the main thread that async operations are completed, it is used if your native module is rending any UI or to make sure your UI gets updated when you async actions are completed

requiresMainQueueSetup() Ensure that your native module is run on the main thread which is relevant in case of UI interactions, if not provided this defaults to YES but a warning will come up in React Native as it will be default to NO in the future

Finally, on the React Native side you can call the native methods in React Native using NativeModules

import { NativeModules } from 'react-native'

Here is examples of Accounts SDK methods being called in React Native:

Note: the NativeModules.AccountsSDK.configureAccountsSDK() method needs to be called every time the app restarts and only needs to be called once each time the app restarts, it will probably work best in an App.tsx or earlier rendered file which is always rendered on app start up

import React, {useEffect} from 'react'
import {View, NativeModules, Text, TouchableOpacity, StyleSheet} from 'react-native'

type AccountsSDKError = {
  message: string
  code: string
}

const Home = () => {

 useEffect(() => {
     onConfigureAccountsSDK();
  }, [])

 const onConfigureAccountsSDK = () => {
   NativeModules.AccountsSDK.configureAccountsSDK()
      .then((result: any) => {
        console.log(result)
      })
      .catch((err: AccountsSDKError) => {
   console.log('Accounts SDK Configuration error:', err.message)
  })
  }

 const onLogin = () => {
    NativeModules.AccountsSDK.login()
      .then((result: any) => {
        console.log('Accounts SDK Login access token:', result)
      })
      .catch((err: AccountsSDKError) => {
        console.log('Accounts SDK Login error:', err.message)
      })
  }

 const onLogout = () => {
    NativeModules.AccountsSDK.logout()
      .then((result: any) => {
        console.log(result)
      })
      .catch(() => {
        console.log('Error on logout')
      })
  }

  const onRefreshToken = () => {
    NativeModules.AccountsSDK.refreshToken()
      .then((result: any) => {
        console.log('Accounts SDK access token:', result)
      })
      .catch((err: AccountsSDKError) => {
        console.log('Accounts SDK Refresh Token error:', err.message)
      })
  }

  const getMemberInfo = () => {
    NativeModules.AccountsSDK.getMemberInfo()
      .then((result: any) => {
        console.log('Member Info:', result)
      })
      .catch((err: AccountsSDKError) => {
        console.log('Member Info error:', err.message)
      })
  }

// Additional
 const getToken = async () => {
    try {
      // iOS getToken has the exact same Native logic as refreshToken, but will not display the login UI if a user is not logged in
      const result = await NativeModules.AccountsSDK.getToken();
      console.log('Accounts SDK Login access token:', result);
    } catch (err) {
      console.log('Get Token error:', (err as Error).message);
    }
  }

  const isLoggedIn = async () => {
    try {
      const result = await AccountsSDK.isLoggedIn();
      console.log('Is logged in: ', result.result);
    } catch (e: any) {
      !(e as Error).message.includes('User not logged in') &&
        console.log('IsLoggedIn error: ', (e as Error).message);
    }
  }

  return (
    <View style={{flex: 1}}>
      <TouchableOpacity onPress={() => onLogin()} style={styles.button}>
        <Text>Login</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onLogout()} style={styles.button}>
        <Text>Logout</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onRefreshToken()} style={styles.button}>
        <Text>Refresh Token </Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => getMemberInfo()} style={styles.button}>
        <Text>Get Member Info</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => getToken()} style={styles.button}>
        <Text>Get Token </Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => isLoggedIn()} style={styles.button}>
        <Text>isLoggedIn </Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#07a',
    width: 170,
    height: 30,
    borderRadius: 4,
    alignItems: 'center',
    margin: 4,
    justifyContent: 'center',
  },
})

export default Home

Analytics

To setup delegates in React Native iOS see:https://ignite.ticketmaster.com/docs/react-native-accounts-information

After setting up Delegates in your Accounts SDK NSObject/RCTEventEmitter class you can follow: https://ignite.ticketmaster.com/docs/analytics

Was this article helpful?

What's Next

Analytics

Table of contents

Accounts SDK

React Native Accounts SDK

Accounts SDK

Accounts SDK React Native (iOS)

Analytics

Accounts SDK React Native (Android)

What's Next