How to Build an iOS App with Snap Kit

Learn how to use Snap Kit for having your users log into Snapchat and create Snapchat content from your own app.

Published in

Lunchbox Technologies

13 min readJun 19, 2018

This tutorial will be coving how to integrate Snapchat’s Login Kit and Create Kit

I don’t know about you, but I haven’t been this excited for a Public API release since Instagram’s unveiled in 2011. That’s Seven Years ago…

Now, I sit before my computer with a new frontier ahead of us, the dawn of Snap Kit. For those that didn’t hear the news yet, Snapchat released their public API that offers four options for interoperability: Login Kit, Create Kit, Bitmoji Kit, and Story Kit.

In this tutorial, we’ll be diving into Login Kit and Create Kit integrations for authenticating with Snapchat, and sending content like photos, videos, and stickers from your iOS app to Snapchat.

Bitmoji Kit will be tackled in a separate tutorial to follow this one, and at the time of writing, Story Kit is currently in private Beta.

Without further adieu, let’s jump into today’s tutorial.

Setting up your Snap Kit Dashboard

After accessing the Snap Kit site, which can be found here, select “Get Started” and log in with your Snapchat account. It will take you to a dashboard from which you can create your app.

Give your app an Icon, a name, and specify whether you will need access to people’s Bitmoji.

After filling out the necessary info for your app, select “Continue” and you will be brought to your app’s dashboard.

What you’ll start off seeing are fields to enter in your app’s name, description, the category which your app will be listed as in the App Store. I filled out this information using text from an app our team has developed utilizing Snap Kit called What We Eating Today.

After you fill out that information, you’ll see two fields that both request the same information “iOS Bundle ID”. If you don’t remember what your bundle identifier for your app is, let’s jump into your project and find it.

If you don’t already have a project created, open Xcode and select “Create a new Xcode project”. Fill out the appropriate information like you normally would, and then you will be taken to your project’s General settings, where you will find your app’s bundle identifier.

First select your project file in Project Navigator, select on the General tab, and there you will find your app’s Bundle Indentifier.

After you’ve found this information, enter it into both fields on your app’s Snap Kit dashboard.

Note: You may have separate targets set up for your application’s production and development environment.

If this is not the case, then skip this paragraph. However, if this is the case, enter in your production bundle identifier under the “App Info” section, and the development bundle identifier under the “Development App Info” section.

Now we are ready to jump adding code to our Xcode project, but we’ll be back to the Snap Kit dashboard in a moment.

Setting up your Info.plist for Snap Kit

Diving into your Xcode project, we need to make some changes to your projects Info.plist file. Access your Info.plist file by clicking your project file in the Project Navigator, and selecting the “Info” tab.

Access your Info.plist by clicking your project file in the Project Navigator, and selecting the “Info” tab.

If you‘re already experienced as a developer and would like to save some time entering in all these values on your plist, you can right-click your Info.plist file and select “Open as -> Source Code”. Inside of the dictionary, copy and paste the following block of code after the last key value pair:

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.rocketnmouse.SnapKitExample (Change this)</string>
<key>CFBundleURLSchemes</key>
<array>
<string>example (Change this)</string>
</array>
</dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>snapchat</string>
<string>bitmoji-sdk</string>
<string>itms-apps</string>
<string>example (Change this)</string>
</array>
<key>SCSDKClientId</key>
<string>Copy and Paste "OAUTH2 CLIENT ID" from Dashboard </string><key>SCSDKRedirectUrl</key>
<string>example://needsomethinghere (Change this)</string>
<key>SCSDKScopes</key>
<array>
<string>https://auth.snapchat.com/oauth2/api/user.external_id</string>
<string>https://auth.snapchat.com/oauth2/api/user.display_name</string>
<string>https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar</string>
</array>

If you didn’t copy paste that code, don’t worry. You can enter a new key by clicking the + button when hovering over the last value in the plist (in this case that was Bundle Name).

The first value you want to add is SCSDKClientId, which should be defined as a String, and can be found on your app’s Snap Kit Dashboard under OAUTH2 CLIENT ID. I’d recommend pasting in the one found under the Development App Info section of your dashboard because your app is currently in development. When you are looking to launch to the App Store, be sure to change this value to the OAUTH2 CLIENT ID found under the App Info section at the top of your dashboard.

The second value that you should enter is your app’s SCSDKRedirectUrl, which has two meanings under Snapchat’s documentation.

Login Kit:
SCSDKRedirectUrl (string): The URL that will handle and complete login requests
Create Kit:
SCSDKRedirectUrl (string): The URL that Snapchat will redirect to in case of an error

Now, as a developer that likes to do things the right way, this is pretty annoying because Snapchat is saying to use the same URL to redirect back to the app in the case of both a successful login and an error when sending content to snapchat.

I repeat, Snapchat makes it so that the same redirect URL is used in the event of a successful login, and an error which creating content… am I crazy or is that dumb?

We’ll look past that point for now, but it needed to be addressed.

For those that don’t have a custom URL Scheme set up for your app currently, then I’ll explain what it is. A URL Scheme allows for third-party apps and sites to link over to your app. For example, if you’ve got Snapchat installed on your phone, open up Safari and type snapchat:// into the address bar and press enter. You’ll see an dialogue like this pop up:

This is an example of a concept called “Deeplinking” that is implemented using Snapchat’s custom URL Scheme.

The same this is also possible for apps like Facebook (fb://), Instagram (instagram://), Yelp (yelp://), amongst many others. And now it will be possible for you as well!

For now, leave the SCSDKRedirectUrl value field empty, and add another field with the name “URL types” that should be selectable from Xcodes autofill. If not, enter that name and select the Type of “Array”. Inside, you will see “Item 0” is added, and give it a type of Dictionary. Next, you are going to want to press the + button next to Item 0 which will add a new empty key inside that dictionary.

The first key you want to add to the dictionary is URL identifier with a Type set to String, and I suggest setting the value of this key to be the same as your app’s Bundle Identifier for now. However, you can feel free to customize this value.

The second key you want to add to the dictionary is URL Schemes, which is going to have a Type of Array, and the first value of “Item 0” in this array is going to be equal to your app’s Custom URL Scheme. I suggest you use a version of your app’s name. For example, if your app is named “Bookworthy”, then you can enter a value of “bookworthy” or “bworthy”. It’s just important that the value sounds like your app, and also is as unique as possible compared to other apps. You don’t want to use fb in this field because that’s already utilized by Facebook.

For the sake of this example, I will be using the URL Scheme of “example”, so that is what I entered in the field.

Now, looking back at SCSDKRedirectUrl, you should enter the value of your app’s custom URL Scheme, followed by a colon and two forward slashes. Then, for the sake of Snapchat’s API, they require you to add some sort of text after the base URL Scheme. If you don’t have anything already in mind, you can use something like example://snapchat or example://redirect.

Whichever value you enter in this field, please be sure to add to your app’s Snap Kit dashboard under the section Redirect URLs:

While your at it, add the username of yourself and whoever else is on your team to the Demo Users section of the Dashboard. This completes everything that we are going to need to modify on the Snap Kit dashboard for this project.

The next key/value that you want to add to your Info.plist is SCSDKScopes. You are going to set the Type of this key to Array, and it can contain up to three values:

https://auth.snapchat.com/oauth2/api/user.external_idhttps://auth.snapchat.com/oauth2/api/user.display_namehttps://auth.snapchat.com/oauth2/api/user.bitmoji.avatar

Adding the external_id scope gives your app access to an identifier to associate with this user who is authenticating with Snapchat, that is unique to them and unique to your app.
Adding the display_name scope gives your app access to the user’s Snapchat display name.
And finally, adding the bitmoji.avatar scope gives your app access to the user’s Bitmoji avatar.

For the this example project, we’ve added all three scopes, but you can remove whichever you feel are unneeded. These scopes should match the permissions on your app’s dashboard which will look something like this:

The last values needed to be added to your app’s Info.plist are under the key of LSApplicationQueriesSchemes which you are going to set the Type to Array. The four values you want to add under this array are snapchat, bitmoji-sdk, itms-apps, and the base of your app’s custom URL Scheme (so in this case example).

This is it for the Info.plist, so next we are going to jump into the code required to implement all of this (which is actually much simpler than anything we’ve done so far).

Importing the Snap Kit Frameworks

Next thing you will need to do is download the Snap Kit frameworks and import them into your project.

After downloading the frameworks, unzip the the file that gets downloaded and you should get a folder with the following content:

For the sake of this project, you want to select the SCSDKCoreKit, SCSDKCreativeKit and SCSDKLoginKit frameworks and drag them into your Project Navigator (maybe into a folder titled “Frameworks”).

Next, head over to your project’s General Settings, and scroll to the bottom make sure these frameworks are added under the Embedded Binaries and Linked Frameworks and Libraries sections. If not, press the + sign under each section and add them so that it looks like this:

Implementing Login Kit

Starting off the coding part of this Snap Kit Tutorial, we’re going to discuss implementing Login Kit first. Let’s jump into your project’s AppDelegate.swift file. When a user successfully authenticates with Snapchat, they must get redirected back from Snapchat to your app (hence why we needed the SCSDKRedirectURL). In order for this transition to be handled, you must add the following import statement to the top of your AppDelegate:

import SCSDKLoginKit

And then, to make sure you give your app the ability to redirect from Snapchat, you must implement the following function:

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
    if SCSDKLoginClient.application(app, open: url, options: options) {
        return true
    }    return true
}

That’s all that you need to add to the AppDelegate for handling successful Snapchat Login.

In your storyboard file where you will be handling the login, add a button that the user can interact with to login, and connect it with your view controller with an IBAction. Make sure that the button follows the Snapchat Design Guidelines. My storyboard looked like this:

Add a Button to your View Controller Scene in the Storyboard file, and connect it with your View Controller using an IBAction.

At the top of your view controller, import the Login Kit like so:

import SCSDKLoginKit

Then, inside that IBAction you created, you should add the following code:

@IBAction func snapchatLoginAction() {
    SCSDKLoginClient.login(from: self) { success, error in
        if let error = error {
            // An error occurred during the login process
            print(error.localizedDescription)
        } else { 
            // The login was a success! This user is now
            // authenticated with Snapchat!
        }
    }
}

And it really is that simple. This code will open up Snapchat on the user’s device and then they will follow the login flow from there, and be redirected back into your app.

From there, you can follow the documentation for Login Kit to learn what types of information can be retrieve from an authenticated user, as well as how to remove Snapchat authentication from a user.

Implementing Create Kit

The process for Create Kit is even simpler. For starters, you don’t need any of the authentication code you used for Login Kit!

Start by connecting your view controller with another button like we did previously, and at the the top of the controller, import the Create Kit framework like so:

import SCSDKCreativeKit

There are 3 different types of content that you can currently send through Create Kit: Photos, Videos, and Non-Photo Content (Sticker, Caption, Attachment Link).

For the sake of this Tutorial, we are going to show how to send a photo to Snapchat, by simply adding the following to function and calling it in your IBAction:

func sendSnapchat(photo: UIImage) {
    let snapPhoto = SCSDKSnapPhoto(image: photo)
    let snap = SCSDKPhotoSnapContent(snapPhoto: snapPhoto)
    // snap.sticker = /* Optional, add a sticker to the Snap */
    // snap.caption = /* Optional, add a caption to the Snap */
    // snap.attachmentUrl = /* Optional, add a link to the Snap */    let api = SCSDKSnapAPI(content: snap)
    api.startSnapping { error in
        if let error = error {
            print(error.localizedDescription)
        } else {
            // Successfully shared content to Snapchat!
        }
    }
}

You can read up on how to send Videos and Non-Photo Content in the rest of the Create Kit documentation found here.

Handling Annoying Errors

You may run into a few errors when building out your Snapchat-integrated project. You may already see that the Snapchat SDK was built using Objective-C, which can cause some funkiness when building out with a Swift project. So, when you are finally ready to ship your app to the App Store, and press Product->Archive, and get presented with this error:

You can solve this issue relatively easy by going to the Project file, selecting your app’s targets that embed the Snapchat SDK, and in Build Settings changing the value of “Enable Bitcode” to “false”.

Now, one last piece of code to add before this app is ready to hit the store. You may find that your application doesn’t build, archive, or maybe you get an error like this when submitting to the App Store:

Don’t worry though, if you go back to that folder we downloaded with the Snap Kit frameworks, you’ll see a folder called scripts with a file inside called thin_frameworks.sh. Open this file and then copy it’s contents. Then, select the project file in the Project Navigator, and on the target of your app, select the Build Phases tab.

Then you should select the + button on the top left corner of the window (not the bottom left one), and select “New Run Script Phase”. When that is created, paste the code you copied from the thin_frameworks.sh file into the code field so that it looks like so:

This should remove those pesky errors.

EDIT: If the above script from Snapchat didn’t work, clean your project and try this other script:

echo "Target architectures: $ARCHS"APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK
do
FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)
FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"
echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"
echo $(lipo -info "$FRAMEWORK_EXECUTABLE_PATH")FRAMEWORK_TMP_PATH="$FRAMEWORK_EXECUTABLE_PATH-tmp"# remove simulator's archs if location is not simulator's directory
case "${TARGET_BUILD_DIR}" in
*"iphonesimulator")
echo "No need to remove archs"
;;
*)
if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "i386") ; then
lipo -output "$FRAMEWORK_TMP_PATH" -remove "i386" "$FRAMEWORK_EXECUTABLE_PATH"
echo "i386 architecture removed"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH"
fi
if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "x86_64") ; then
lipo -output "$FRAMEWORK_TMP_PATH" -remove "x86_64" "$FRAMEWORK_EXECUTABLE_PATH"
echo "x86_64 architecture removed"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH"
fi
;;
esacecho "Completed for executable $FRAMEWORK_EXECUTABLE_PATH"
echo $(lipo -info "$FRAMEWORK_EXECUTABLE_PATH")donelipo -output "$FRAMEWORK_TMP_PATH" -remove "x86_64" "$FRAMEWORK_EXECUTABLE_PATH"
echo "x86_64 architecture removed"
rm "$FRAMEWORK_EXECUTABLE_PATH"
mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH"
fi
;;
esac
echo "Completed for executable $FRAMEWORK_EXECUTABLE_PATH"
echo $(lipo -info "$FRAMEWORK_EXECUTABLE_PATH")
done

Congratulations! You’ve successfully implemented Snap Kit 👻 🎉

Now that you have this set up, you can authenticate user’s that have Snapchat and send Photos, Videos and fun Stickers with them.

Expect this tutorial to be an evolving document, that you are welcome to contribute to. Comment below with any other errors you’ve encountered along the way, and we can work through it as a community. Also, if you have an further useful information to make this tutorial clearer or more accurate, please also respond down below.

We’ve integrated Snap Kit into our new app What We Eating Today that is live on the App Store!

Our app is built to help you answer the question of “What are we eating today?” by finding restaurants near you that have a Yelp rating of 4+ stars.

Using the Create Kit, we added a feature to send a Snap from our app, with a custom Sticker and attachment to the restaurant you are sharing with your friends. You can use this feature to get a consensus with your friends of where you’ll all be eating, or to let everyone on your story know where you’ll be going!

If you like our tutorial, feel free to clap or leave a response down below. All feedback is appreciated.

To see the Snap Kit API in action, check out our app What We Eating Today on the App Store!

Looking for a hunter to get us on Product Hunt!