# React Native Integration

Information

# Preview

The React Native SDK is currently in preview. This means that the API and functionality may change in future releases.

# Support

If you require any help during the integration or have any questions, don’t hesitate to reach out to us!

# Getting Started

# Resolving the SDK

Obtain the access token login in the anybill Artifactory portal (opens new window) into your artifactory account using the provided credentials in the integration documents. Click the "Set Me Up" button in the artifact tree to generate the token using the provided password.

Add the credentials to your .npmrc file in the root of your project:

@anybill:registry=anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/
//anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/:_password=<your_password>
//anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/:username=<your_username>

Then include the SDK in your project by executing the install command of your package manager 
npm install @anybill/anybill_react_native_sdk

# Initialization

# Importing the SDK

After installing, import the AnybillReactNSDK:

import { AnybillReactNSDK } from '@anybill/anybill_react_native_sdk';

# Initialization

Initilize the anybill SDK, ideally in the earliest entry point of your application (e.g. index.js)

AnybillReactNSDK
  .init(
    apiEnv: "<API_ENV>",
    clientId: "<CLIENT_ID>",
  );

Wrap your application's root component with a context provider (for example, AuthProvider). This pattern ensures that state and methods managed by the provider are accessible throughout your component tree via React Context.

import AuthProvider from '@anybill/anybill_react_native_sdk/AuthProvider';

const App = () => {
  return (
    <AuthProvider>
      {/* Your app components go here */}
    </AuthProvider>
  );
};

# Keychain

This package includes the react-native-keychain library, which is used to securely store sensitive information like access tokens and refresh tokens. The library provides a secure way to store and retrieve these tokens on both iOS and Android platforms. They have to be linked to your project.

# Android

To link the react-native-keychain library to your Android project, you need to add the following lines to your settings.gradle file:

// React Native Keychain
include ':react-native-keychain'
project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android')

Then, in your apps' build.gradle file, add the dependency:

dependencies {
    // ...
    implementation project(':react-native-keychain')
    // ...
}

Finally add the package to your MainApplication.kt file:


import com.oblador.keychain.KeychainPackage
// ...
override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // add(MyReactNativePackage())
      add(KeychainPackage())
    }

# iOS

To link the react-native-keychain library to your iOS project, you need to add the following lines to your Podfile:

  # Keychain
  pod 'RNKeychain', :path => '../node_modules/react-native-keychain'

# Base module

The Base module provides essential authentication functions within the anybill SDK. Most of these functions are accessible through the AuthProvider singleton, which manages user authentication and token storage.

# Authentication

The anybill SDK handles authentication seamlessly within its internal processes. Once a user successfully authenticates, an Access Token and a Refresh Token are securely stored in the device's local keystore:

  • Access Token: Valid for 24 hours and used to authorize user requests to the anybill API.

  • Refresh Token: Valid for 90 days and used to renew the Access Token upon expiration. When the Refresh Token expires, the user will need to reauthenticate.

This automated process minimizes the need for manual token handling, ensuring a smooth and secure experience for both users and developers.

# Authenticate User

You can authenticate a user in the SDK through two methods:

  1. Credentials Login: Authenticate an existing anybill user using valid credentials (email and password).
  2. Token-Based Login: Use token information obtained from the Partner Platform API to initialize the SDK and authenticate the user without requiring credentials.

Credentials Login Developers can authenticate Anybill users by utilizing the loginUser() method provided by the AuthProvider. This method requires valid credentials, including the email and password of a registered Anybill user.

    import { useAuth } from '@anybill/anybill_react_native_sdk/AuthProvider';
    
    const { login } = useAuth();

    async loginToken(username: string, password: string, clientId: string) {
        try {
            await login(username, password, clientId);
        } catch (error) {
            //...
        }
    }

To get the access token:

    const { getAccessToken } = useAuth();

    async getAnybillToken() {
      try {
          const token = await getAccessToken();
      } catch (error) {
        //...
      }
    }

To get the data of the current logged in user:

    const { getUser } = useAuth();

    async getUser() {
      try {
          const user = await getUser();
      } catch (error) {
        //...
      }
    }

TIP

More coming soon! Contact us for more information on the SDK and its coming features.

Back to top

← Web Integration →