React Native

Before you begin, you will need a Snapchat account with a verified email address. If you do not have one yet, you can create one here.

Requirements

Android

Android Studio 3.0+
Gradle 3.0+
Android API Level 19+

To connect your app to Snapchat, your app must also have the following targets:

Android support library version 22+
Snapchat Android 11.49.0

iOS

iOS version 10.0+

To connect your app to Snapchat, your app must also have the following targets:

Snapchat iOS 11.49.0

Snap Kit Developer Portal Setup

Step 1: App Registration

Go to the Snap Kit Developer Portal, sign-in with your Snapchat Account, and either create a new App by clicking on New Project or open an already existing app.
After the app is registered, click Setup. You should see two OAuth Client IDs:

OAuth Client ID	Usage
Production	This lets your app post content from any Snapchat account, but your app must be approved for the Production Client ID to work.
Staging	This lets your app post content even before an app is reviewed and approved, but only Snapchat accounts listed under will be able to use your application.

Step 2: Add Demo Users (Optional: Required Only if Testing on Staging)

When using the Development/Staging Environment Client ID, everything will work as is for all the users listed in the Demo Users list. If you created the app, your Snapchat username should automatically be added to that list.

Make sure to add the Snapchat usernames of all the users who will help you with development and testing. If the username you are testing with is not in the demo users list, you will see an error.

Step 3: Add Platform Identifiers

To allow your Android and iOS apps access Snap Kit APIs, we need to update the Platform Identifiers section with:

Stage	Platform	Bundle or App ID
Select Stage	Android	Paste your Android App ID (specified as the applicationId in the app-level build.gradle file).
Select Stage	iOS	Paste your iOS Bundle ID (refer to the Bundle Identifier for your app in the Info.plist file).

To be able to use Login Kit, you need to enable it on the Developer Portal.

Click your version under Versions and enable Login Kit.
Under the User Permissions section, check all the options you would want access for.
Scopes let your application declare which Login Kit features it wants access to but you need to enable the appropriate options on the Snap Kit developer portal.
If a scope is toggleable by the user, the user can deny access to one scope while agreeing to grant access to others.
Login Kit offers the following scopes:
- https://auth.snapchat.com/oauth2/api/user.display_name: Grants access to the user's Snapchat display name
- https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar: Grants access to the user's Bitmoji avatar; toggleable by user
Update the Redirect URIs for OAuth section with the URI, or the url that will handle the login completion.

The redirect URL itself does not need to have any meaning associated with it; in general, the only real criteria would be to pick a URL with a scheme that is unlikely to collide with a scheme of another app in the device.
However, the URL should follow the syntax "foo://bar". If you need ideas, you could try "myapp://snap-kit/oauth2".

You don't need to submit this version for review if testing on Staging.

Step 5: Activate the Version on the Staging/Production Environment

To be able to use your app, you need to activate your version (on which you enabled Login Kit) on the appropriate Environment (Staging/Production).

Click Setup and update the Active on Staging/Production version with your version on which you enabled Login Kit.

React Native Environment Setup

Always refer to React Native Public Documentation for the most up-to-date information.

Install Homebrew
Install Android Studio
Install Xcode
Install JDK (can be any of Java 8 variant)

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Add ANDROID_HOME to path

export ANDROID_HOME=$HOME/Library/Android/sdk

Install cocoapods

brew install cocoapods

Install Node & Watchman

brew install node
brew install watchman

Install yarn

brew install yarn

React Native App Setup

Step 1: Create a React Native App

Refer to React Native Public Documentation for instructions on how to set up a React Native app.

Step 2: Add the Snap Kit React Native Dependency

yarn add @snapchat/snap-kit-react-native

Refer to Snap Kit React Native npm repository for more information.

Android App Setup

Open up your app’s project-level build.gradle file and add the following code block in the repositories section:

repositories {
   maven {
     url "https://storage.googleapis.com/snap-kit-build/maven"
   }
 }

Step 2: Update Your `AndroidManifest.xml` File

You will need to amend the following entries within the application node:

AndroidManifest.xml
<meta-data
    android:name="com.snapchat.kit.sdk.clientId"
    <!-- Paste your Staging/Production OAuth2 Client ID from the Snap Kit Developer Portal here -->
    android:value="INSERT_YOUR_OAUTH_CLIENT_ID" />

<meta-data
    android:name="com.snapchat.kit.sdk.redirectUrl"
    <!-- Paste your Redirect URL from the Snap Kit Developer Portal here (this url will handle and complete login requests) -->
    android:value="INSERT_YOUR_OAUTH_REDIRECT_URL" />

<meta-data
    android:name="com.snapchat.kit.sdk.scopes"
    android:resource="@array/snap_connect_scopes" />

In addition, you will need to add SnapKitActivity and amend the scheme, host, and path as shown below:

AndroidManifest.xml
<activity
  android:name="com.snapchat.kit.sdk.SnapKitActivity"
  android:launchMode="singleTask">

  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <!--
        Enter the parts of your redirect url below
        e.g., if your redirect url is myapp://snap-kit/oauth2
           android:scheme="myapp"
           android:host="snap-kit"
           android:path="/oauth2"
      !-->
      <data
        android:scheme="the scheme of your redirect url"
        android:host="the host of your redirect url"
        android:path="the path of your redirect url"
      />
  </intent-filter>
</activity>

If your app targets Android 11 (API level 30) or higher, you will also need to include the following package query:

AndroidManifest.xml
<queries>
  <package android:name="com.snapchat.android" />
</queries>

Step 3: Define Scopes in Your `res/values/arrays.xml` File

When you specify which scopes you'd like, use the full URL, like this:

res/values/arrays.xml
 <key>SCSDKScopes</key>
  <array>
    <string>https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar</string>
    <!-- other scopes you might have... -->
  </array>

iOS App Setup

Step 1: Update Your `Info.plist` File

Add the following fields in your application’s Info.plist file:

Key	Value
LSApplicationQueriesSchemes (string-array)	This should contain snapchat, bitmoji-sdk, and itms-apps.
SCSDKClientId (string)	The OAuth Client ID you received from registering your app on the developer portal.
SCSDKRedirectUrl (string)	The URL that Snapchat will use to redirect users back to your app after a successful authorization. This is the one that you added in the developer portal during the Snap Kit developer portal setup.
SCSDKScopes (string-array)	Your application will request scopes of access from the user. For help defining scopes, see the Understanding Scopes section above for more information.
URL Types / Document Role (string)	Set it to Editor.
URL Types / URL Identifier (string)	Set it to the app's Bundle ID, ie. $(PRODUCT_BUNDLE_IDENTIFIER).
URL Types / URL Schemes (string-array)	Set it to a unique string (without space) to allow Snapchat to redirect back to your app after a successful authorization. For example, If your app's redirectUrl (refer to the SCSDKRedirectUrl key) is myapp://snap-kit/oauth2, then your scheme would be myapp.

Step 2: Handle the Deeplink Response from Snapchat

Once your user successfully authorizes your app to log in with Snapchat, you'll need to handle the deeplink that comes from Snapchat to get the access token.

In AppDelegate.m, use the SCSDKLoginClient interface to receive the deeplink:

AppDelegate.m
#import <SCSDKLoginKit/SCSDKLoginKit.h>

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
. . .
              if ([SCSDKLoginClient application:application openUrl:url options:options]) {
                return YES;
              }
. . .
}

Features

When a user taps the Log In with Snapchat button in your app, it directs them to Snapchat if they have it installed. If not, it prompts them to log in with Snapchat through an in-app web view. Make sure your app knows what to do once users successfully log into Snapchat.

LoginKit.login()
  .then(() => {
    // Handle login success
  })
  .catch((error) => {
    // Handle login failure
  });

To check whether the user is currently logged in:

LoginKit.isUserLoggedIn().then((isLoggedIn) => {
  // Use isLoggedIn
});

A user might want to unlink their current OAuth2 session, which means they’ll lose access to their Bitmoji avatar and display name in your app in this specific session. The clearToken() method below can be used to clear the access token.

LoginKit.clearToken();

To refresh and retrieve a new access token, use the following:

LoginKit.refreshAccessToken()
  .then((accessToken) => {
    // Handle new access token
  })
  .catch((error) => {
    // Handle error refreshing access token
  });

Check if User has Access to Resources with Requested Scope

To check if a user has access to resources based on one, or all, of the requested scopes, use the hasAccessToScope() method.

LoginKit.hasAccessToScope(UserDataScopes.DISPLAY_NAME).then((hasAccess) => {
  // Use hasAccess
});

Fetch User Data Based on Requested Scope

Currently, we support two requests for user data: Get Display Name and Get Bitmoji Avatar. Once a user logs into your app using Snapchat, you can make requests to fetch that information.

const query = '{me{bitmoji{avatar},displayName}}';
const variables = null;

LoginKit.fetchUserData(query, variables)
  .then((userData) => {
    // Use response
  })
  .catch((error) => {
    // Handle error
  });

You can also register for updates to a user’s login state.

const eventCallbackLoginStarted = () => {
  // Handle event emitted
};

const eventCallbackLoginSucceeded = () => {
  // Handle event emitted
};

const eventCallbackLoginFailed = () => {
  // Handle event emitted
};

const eventCallbackLogout = () => {
  // Handle event emitted
};

// Subscribing to events
const loginStartedListener = DeviceEventEmitter.addListener(
  LoginState.LOGIN_KIT_LOGIN_STARTED,
  eventCallbackLoginStarted
);

const loginSucceededListener = DeviceEventEmitter.addListener(
  LoginState.LOGIN_KIT_LOGIN_SUCCEEDED,
  eventCallbackLoginSucceeded
);

const loginFailedListener = DeviceEventEmitter.addListener(
  LoginState.LOGIN_KIT_LOGIN_FAILED,
  eventCallbackLoginFailed
);

const logoutListener = DeviceEventEmitter.addListener(
  LoginState.LOGIN_KIT_LOGOUT,
  eventCallbackLogout
);

// Unsubscribing to events
loginStartedListener.removeListener();
loginSucceededListener.removeListener();
loginFailedListener.removeListener();
logoutListener.removeListener();

What’s Next

Dig deeper. See our API reference docs.
Something not working? Report bugs and doc issues here so we can make it better for you.

Was this page helpful?

Yes

Requirements​

Android​

iOS​

Snap Kit Developer Portal Setup​

Step 1: App Registration​

Step 2: Add Demo Users (Optional: Required Only if Testing on Staging)​

Step 3: Add Platform Identifiers​

Step 4: Enable Login Kit for Your App’s Version​

Step 5: Activate the Version on the Staging/Production Environment​

React Native Environment Setup​

React Native App Setup​

Step 1: Create a React Native App​

Step 2: Add the Snap Kit React Native Dependency​

Android App Setup​

Step 1: Import Login Kit from Our Maven Repository​

Step 2: Update Your AndroidManifest.xml File​

Step 3: Define Scopes in Your res/values/arrays.xml File​

iOS App Setup​

Step 1: Update Your Info.plist File​

Step 2: Handle the Deeplink Response from Snapchat​

Features​

Initiate Login with Snapchat​

Query Login State​

Clear Login Access Token​

Refresh and Retrieve Login Access Token​

Check if User has Access to Resources with Requested Scope​

Fetch User Data Based on Requested Scope​

Register for Login State Updates​

What’s Next​