Expo

Rownd bindings for Expo

Prerequisites

You must be using React Native v0.64 or higher.

Must be an ejected Expo app which can be bare React Native or use an Expo development build. Instructions for bare React Native app can be found here.

Installation

First, install the Rownd SDK for Expo.

npm install @rownd/react-native

Expo development

1. Add @rownd/react-native as a plugin to your app.json file.

{
  "expo": {
    "plugins": ["@rownd/react-native"]
  }
}

2. Install Expo BuildProperties to set iOS/Android versions

npx expo install expo-build-properties

3. Add expo-build-properties as a plugin to your app.json file. Ensure the Sdk versions match or are above provided iOS/Android versions.

{
  "expo": {
    "plugins": [
      "@rownd/react-native",
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 26
          },
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ]
  }
}

4. (optional) Enable Apple sign-in for iOS in your app.json file.

{
  "expo": {
    "ios": {
      "usesAppleSignIn": true
    }
  }
}

5. (optional) Enable Google sign-in for iOS. Add your Google IOS Client ID client as a URL Scheme in your app.json file.

{
  "expo": {
    "infoPlist": {
      "CFBundleURLTypes": [
        {
          "CFBundleURLSchemes": [
            "com.googleusercontent.apps.xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxx"
          ]
        }
      ]
    }
  }
}

Enable deep linking

Rownd supports automatically signing-in users when they initially install your app or when they click a sign-in link when the app is already installed. Follow instructions below to setup.

1. Visit the Rownd platform and go to the Sign-in methods page. Open the Mobile app settings modal and (1) create a subdomain and (2) fill out the iOS/Android settings.

2. Enable deep linking for Expo using app.json and <subdomain> created in the Rownd platform.

These settings might only apply at the time the native projects were generated. Try deleting the ios/android folders and rebuilding the project.

File: app.json

{
  "expo": {
    "ios": {
      ...
       "associatedDomains": ["applinks:<subdomain>.rownd.link"]
    },
    "android": {
      ...
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "<subdomain>.rownd.link"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

Usage

The Rownd SDK includes a context provider that will enable any component of your app to access authentication state and user data.

Before you can use the SDK, you'll need to obtain an App Key from the Rownd Dashboard.

import { RowndProvider } from "@rownd/react-native";

// ...

export default function Root() {
  return (
    <RowndProvider config={{
      appKey="<your app key>"
    }}>
      <App />
    </RowndProvider>
  );
}

Later on within your app's components, you can use the Rownd hook to access the Rownd browser API:

import { View, Text } from "react-native";
import { useRownd } from "@rownd/react";

export default function MyProtectedComponent(props) {
  const { is_authenticated, user, requestSignIn, getAccessToken } = useRownd();

  // You can also request a sign in without a user pressing a button
  // by calling requestSignIn() from a useEffect callback.
  // useEffect(() => {
  //   if (!is_authenticated) {
  //     requestSignIn();
  //   }
  // }, [is_authenticated]);

  return (
    <View>
      {is_authenticated ? (
        <>
          <h1>Welcome {user.data.first_name}</h1>
          <button onClick={() => getAccessToken()}>Get access token</button>
        </>
      ) : (
        <>
          <Text>Please sign in to continue</Text>
          <Pressable onPress={() => requestSignIn()}>
            <Text>Sign in</Text>
          </Pressable>
        </>
      )}
    </View>
  );
}

API reference

Most API methods are made available via the Rownd Provider and its associated useRownd React hook. Unless otherwise noted, we're assuming that you're using hooks.

requestSignIn()

Trigger the Rownd sign in dialog

Property	Type	Description
method	email phone apple google passkey	Requests a sign-in, but with a specific authentication provider (e.g., Sign in with Apple). Rownd treats this information as a method. If the specified authentication provider is enabled within your Rownd app configuration, it will be honored. If not, Rownd will fall back to the default flow.
intent	sign_in sign_up	This option applies only when you have opted to split the sign-up/sign-in flow via the Rownd dashboard. Valid values are sign_in or Sign_up. If you don’t set this value, the user will be presented with the unified sign-in/sign-up flow. Please reach out to [e-mail] to enable.
postSignInRedirect (Not recommended)	String	If a subdomain is provided in the Rownd dashboard, this behavior will work by default. The URL to redirect to after the user has signed in. This can be used for deep-linking within the app or to ensure that the user is redirected back into the app after completing a sign-in from email or text message.

const { requestSignIn } = useRownd();

requestSignIn({
  method: 'apple'
});

signOut()

Sign out the user and clear their profile, returning them to a completely unauthenticated state.

const { signOut } = useRownd();
signOut();

getAccessToken()

Retrieves the active, valid access token for the current user.

const { getAccessToken } = useRownd();

let accessToken = await getAccessToken();

is_authenticated

Indicates whether the current user is signed in or not.

const { is_authenticated } = useRownd();

return (
  <>
    {is_authenticated && <ProtectedRoute />}
    {!is_authenticated && <PublicRoute />}
  </>
);

access_token

Represents the current access token for the user.

const { access_token } = useRownd();

useEffect(() => {
    axios({
        method: 'post',
        url: '/api/sessions'
        headers: {
            authorization: `Bearer ${access_token}`
        }
    }).then(console.log);
}, [access_token]);

user

Represents information about the current user, specifically their profile information. In the example below, we use the existing data to display the current value of first_name in a form field, update a local copy of that data as the user changes it, and then save the changes to Rownd once the user submits the form.

const { user } = useRownd();

return (
    <form onSubmit={() => user.set(profile)}>
        <Text>First name</Text>
            <TextInput
                value={user?.data?.first_name}
                onChangeText={}
            />
        <Pressable onPress={}>Save</button>
    </form>
);

Merge data into the user profile

const { user } = useRownd();
user.set({
  first_name: "Alice",
  last_name: "Ranier",
});

Set a specific field in the user profile

const { user } = useRownd();
user.setValue("first_name", "Alice");