react-native

Login Kit x React Native

Login Kit sample code for React Native.

Prerequisite

You need to have Snapchat Account before accessing any of the Snap Kit APIs. It's quick and easy, see Creating a Snapchat Account.

App Registration

1. Go to the Snap Kit developer portal > Sign-in with your Snapchat Account > Either create a new App by clicking on New Project Or Open an already existing app.

2. After the app is registered, click Setup and 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 the Demo Users will be able to use your application.

Snap Kit Setup

Required

Below are the minimum pieces of bits you would need to set for this sample app to work.

1. Update the Code with OAuth Client ID

Copy the OAuth Client ID for Staging and paste it in the code:

Platform	Location
Android	Paste it under the com.snapchat.kit.sdk.clientId meta-data key defined in the AndroidManifest.xml file.
iOS	Paste it under the SCSDKClientId key defined in the Info.plist file.

2. Add Demo Users on the Developer Portal

To test your Snap Kit integration on Staging we need to update the Demo Users section with:

Username
Your snapchat username

3. Add Platform Identifiers on the Developer Portal

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
Staging	Android	com.reactnativeloginkitdemo
Staging	iOS	org.reactjs.native.example.ReactNativeLoginKitDemo

💁 For info on where these identifiers are specified, check

Platform	Location
Android	Specified as the applicationId under the defaultConfig tag in the build.gradle file.
iOS	Refer the Bundle Identifier for your app in the Info.plist file.

4. Enable Login Kit for your app's version

To be able to use Login Kit we need to enable it on the developer portal.

1. Click under Versions and enable Login Kit.

2. Under the User Permissions and Snapchat Verify check all the options you would want access for.

   For this sample app, check 👇
   ✓ Display Name
   ✓ Bitmoji Avatar
   ✓ Snapchat Verify

3. Update the Redirect URIs for OAuth section with:

   URI
   snapkitexample://main/auth

   💁 For info on where the redirect url is specified, check

   Platform	Location
   Android	Specied under the com.snapchat.kit.sdk.redirectUrl meta-data key defined in the AndroidManifest.xml file.
   iOS	Specied under the SCSDKRedirectUrl key defined in the Info.plist file.

Note: You don't need to submit this version for review for testing on Staging

5. Activate the version on the Staging Environment

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

Click Setup and update the Active on Staging version with your version on which you enabled Login Kit ( usually it's named Initial Version if you haven't renamed it).

(Optional) If using your own sample app

If you are using your own sample app you would need additional setup. This is already done for you in this sample app.

General

1. Add the Snap Kit React Native dependency

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

Android

Always refer public docs for most up-to date info.

1. Import the Login Kit from our Maven repository

Open up your apps 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"
   }
 }

2. Update your AndroidManifest.xml file

You need to amend these entries within the <application> node:

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

If your app's redirectUrl is snapkitexample://main/auth then your redirectUrl attribute would look like this:

<meta-data android:name="com.snapchat.kit.sdk.redirectUrl" android:value="snapkitexample://main/auth" />

You will also need to amend the scheme, host and path as per below:

  <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" />

          <data
              android:scheme="snapkitexample"
              android:host="main"
              android:path="/auth"
              />
      </intent-filter>

  </activity>

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

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

3. Define Scopes in your res/values/arrays.xml file

Scopes let your application declare which Login Kit features it wants access to.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string-array name="snap_connect_scopes">
   <item>https://auth.snapchat.com/oauth2/api/user.display_name</item>
   <item>https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar</item>
   <item>https://auth.snapchat.com/oauth2/api/user.external_id</item>
 </string-array>
</resources>

📝 Note: You need to enable these scopes on the developer portal under the Login Kit option to be able to access them.

iOS

Always refer public docs for most up-to date info.

1. Update your Info.plist file

Key	Value
LSApplicationQueriesSchemes	This should contain snapchat, bitmoji-sdk, and tms-apps.
SCSDKClientId	The OAuth Client ID you received from registering your app on the developer portal.
SCSDKRedirectUrl	The URL that Snapchat will use to redirect users back to your app after a successful authorization.
SCSDKScopes	OAuth2 scopes. Set it one or all of the following scopes for the resources you wish to retrieve from the user profile: - https://auth.snapchat.com/oauth2/api/user.display_name - https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar - https://auth.snapchat.com/oauth2/api/user.external_id
URL Types / Document Role	Set it to Editor.
URL Types / URL identifier	Set it to the app's Bundle ID ie. $(PRODUCT_BUNDLE_IDENTIFIER).
URL Types / URL Schemes	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 the SCSDKRedirectUrl key) is snapkitexample://main/auth then your scheme would be snapkitexample.

2. Finishing Login with Snapchat

Once your user successfully authorizes your app to log in with Snapchat, you 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:

#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;
              }
. . .
}

React Native Environment Setup

Always refer React Native public docs for most up-to-date information.

1. Install Homebrew

2. Install Android Studio

3. Install Xcode

4. Install JDK (can be any of Java 8 variant)

   $ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

5. Add ANDROID_HOME to path

   $ export ANDROID_HOME=$HOME/Library/Android/sdk

6. Install cocoapods

   $ brew install cocoapods

7. Install Node & Watchman

   $ brew install node
   $ brew install watchman

8. Install yarn

   $ brew install yarn

Running the Sample App

1. Clone the Sample App repository on your local machine

   # Clone the repo
   $ git clone https://github.com/Snapchat/login-kit-sample.git
   
   # CD into the React Native root directory
   $ cd login-kit-sample/react-native/

   Note: You should now be inside the react-native root directory: /Users/.../login-kit-sample/react-native/

2. Install JS dependencies

   $ yarn install

3. Install pods

   # CD into the "ios" directory
   $ cd ios
   
   # Install pods
   $ pod install
   
   # CD back to the root directory
   $ cd ..

4. Run the ReactNativeLoginKitDemo app

   # Running on Android
   $ yarn android
   
   # Running on iOS Simulator
   $ yarn ios
   
   # Running on iOS Physical Device (You can see the <device_name> from the Xcode)
   # Note that this will require:
   #   - Selecting a development team in the "Signing & Capabilities" editor in Xcode
   $ yarn ios --device "<device_name>"