Authenticate With Firebase Using Snap's iOS Login Firebase Extension

This extension allows your community of users to authenticate with Firebase using their Snapchat accounts. Snapchat has a massive reach, with millions of people using the app daily. Logging in via Snapchat allows you to tap into this audience, providing a quick and easy way for your users to sign up, log in, and avoid any obstacles.

Get Started

Before you begin, you will need a Snapchat account with a verified email address. If you do not have one yet, you can create it here. Once you have obtained an account, follow the instructions below:

Google Cloud Project

In your Google Cloud project, make sure to enable the Secret Manager API.

Snapchat Developer Portal

The Developer Portal is a web interface designed for Snap Kit developers to create and manage their Projects. Using your Snapchat account, log in to the Portal.

1. Once you have logged in, you will be prompted to create a new Organization. If you already have one, you may skip this step.
2. Next, create a new Snap Kit Project. If you already have one, you may also skip this step.
3. In your Project, you will find several elements that will help you build out your application. For more information on each of these elements, please refer to this guide.
4. Under the Setup tab, you will find a section for a Staging and Production client ID. Here, generate a confidential OAuth 2.0 client ID. You may add one for Staging for testing purposes, and one for prod for Production usage. You will have one-time access to client secrets.
5. Next, navigate back to the Secret Manager in Google Cloud.
6. Create a secret with the value obtained in Step 4.
7. Go back to your Snap Kit Project.
8. Create a version and toggle Login Kit on. Configure the necessary parameters, such as the Redirect URIs for OAuth.
9. To use the Production client, go through the review process and get your Snap Kit project approved. You can find a guide for our review guidelines here.

Firebase Project

In your Firebase Project,

1. Enable Firebase Authentication to enable sign-up options for your users.
2. Create a service account for your project in the Service Accounts dashboard.
3. Give the following roles to the newly created account:
   • Cloud Functions Admin
   • Firebase Admin SDK Administrator Service Agent
   • Firebase App Check Admin
   • Firebase Authentication Admin

Install the Snap Login Firebase Extension

Once you’ve set up your Projects, you must install the Login Firebase extension. You can do this either through Firebase’s console or CLI:

Firebase Console

To install the extension using the Firebase console, visit the page here.

Firebase CLI

To install the extension using the Firebase CLI, run the following commands:

npm install -g firebase-tools

firebase ext:install snap/snapchat-login --project=projectId_or_alias

Service Account Permissions

After you have installed the extension:

1. Navigate to the Functions section in your Firebase project. You will see a list of Cloud Functions deployed.
2. Then, navigate to the Detailed Usage Stats of the getCustomToken Cloud Function.
3. Select Details.
4. Assign Service Account Token Creator and Secret Manager Secret Accessor IAM roles to the service account that you see.

iOS Project

In your iOS Project, if you haven’t already, add Firebase. Detailed instructions are highlighted in this page.

Make sure to include the following pods in your Podfile:

pod 'Firebase/Auth'

pod 'SnapSDK'

Authenticate With Firebase

1. Initiate the Snapchat OAuth 2.0 authorization process:

#import <SCSDKLoginKit/SCSDKLoginKit.h>

@import Firebase;

+ (void)exampleLoginMethod
{
   [SCSDKLoginClient startFirebaseAuthFromViewController:viewController
                                              completion:^(NSString * customToken, NSError * error) {
       if (error != nil) {
         // Handle Error
         return;
       }

       [[FIRAuth auth] signInWithCustomToken:customToken
                                  completion:^(FIRAuthDataResult * _Nullable authResult, NSError * _Nullable error) {
           // Handle auth result and error
           return;
       }];
   }];
}

2. Import the Firebase module in your UIApplicationDelegate:

@import Firebase;

3. Configure a FirebaseApp shared instance. This is typically done in your application’s application:didFinishLaunchingWithOptions: method:

[FIRApp configure];

4. Add code in your app’s application:didFinishLaunchingWithOptions: method to handle deep-links back from the Snapchat client to retrieve the custom token from the Snap Login Firebase Extension:

[SCSDKLoginClient application:app openURL:url options:options];