Authenticate With Firebase Using Snap's Android 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.
- Once you have logged in, you will be prompted to create a new Organization. If you already have one, you may skip this step.
- Next, create a new Snap Kit Project. If you already have one, you may also skip this step.
- 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.
- 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.
- Next, navigate back to the Secret Manager in Google Cloud.
- Create a secret with the value obtained in Step 4.
- Go back to your Snap Kit Project.
- Create a version and toggle Login Kit on. Configure the necessary parameters, such as the Redirect URIs for OAuth.
- 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,
- Enable Firebase Authentication to enable sign-up options for your users.
- Create a service account for your project in the Service Accounts dashboard.
- 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:
- Navigate to the Functions section in your Firebase project. You will see a list of Cloud Functions deployed.
- Then, navigate to the Detailed Usage Stats of the
getCustomToken
Cloud Function. - Select Details.
- Assign Service Account Token Creator and Secret Manager Secret Accessor IAM roles to the service account that you see.
Android Project
Add Firebase in your Android project, if you haven’t already. For detailed instructions, see the Firebase documentation.
- Add dependencies to
loginkit
. For more information, please refer to the Login Kit Android guide.
allprojects {
repositories {
google()
mavenCentral()
}
}
dependencyResolutionManagement {
. . .
repositories {
google()
mavenCentral()
}
}
. . .
- Add the following implementation to the dependencies section of your application’s
build.gradle
file, not the root project’sbuild.gradle
:
dependencies {
...
implementation([
'com.snap.loginkit:loginkit:2.1.0',
])
}
- Include the relevant Firebase Auth dependencies.
- Update your
AndroidManifest.xml
with the following (most instructions can be found in our Login Kit guide, aside from the Firebase Custom Token metadata flag, which is highlighted below):
. . .
<uses-permission android:name="android.permission.INTERNET" />
<!-- TODO(1): Declare the Snapchat package query
(required only if your app targets Android 11 (API 30) or higher)
-->
<queries>
<package android:name="com.snapchat.android" />
</queries>
<application ...>
<!-- TODO(2) Insert Confidential OAuth2 Client ID from Snap Kit
Developer Portal !-->
<!--
Make sure that in the Snap Kit Developer Portal:
1. You set your app's Android App ID under the "Platform Identifiers"
section.
2. Your Snapchat username is in the list of "Demo Users" (only
required if testing on the Staging).
3. Click Generate for "Confidential OAuth 2.0 Client ID".
Then you should paste your Staging/Production Confidential OAuth2 Client
ID here.
-->
<!--
You can use the Staging Client ID anytime, even before an app is
reviewed and approved. However, only accounts listed under the
"Demo Users" on the Snap Kit Developer Portal will be able to use
your application.
-->
<!--
With the Production Client ID, your app can post the content from
any Snapchat account. However, your app must be approved for the
Production Client ID to work.
-->
<meta-data
android:name="com.snap.kit.clientId"
android:value="INSERT_CONFIDENTIAL_OAUTH2_CLIENT_ID" />
<!-- TODO(3) Declare the redirect url that will handle and complete
login requests !-->
<!--
Make sure that in the Snap Kit Developer Portal:
1. You add this url in the "Redirect URIs for OAuth" section
-->
<!--
The redirect URL itself doesn't need to have any meaning associated
with it and 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.
The URL should however follow the syntax "foo://bar".
If you need ideas, you could try "myapp://snap-kit/oauth2".
-->
<meta-data
android:name="com.snap.kit.redirectUrl"
android:value="INSERT_URL_TO_HANDLE_LOGIN_COMPLETION" />
<!-- TODO(4) Declare the resources that you want to request -->
<!--
You'll have to define ‘snap_connect_scopes’ as an Android resource
array in ‘res/values/arrays.xml’
-->
<meta-data
android:name="com.snap.kit.scopes"
android:resource="@array/snap_connect_scopes" />
<!-- TODO(5) Specify the full URL to the Firebase Extension
resource !-->
<!-- You should get this after you install the Firebase Extension !-->
<meta-data
android:name="com.snap.kit.firebaseExtCustomTokenUrl"
android:value="INSERT_FIREBASE_CUSTOM_TOKEN_URL" />
...
<!-- TODO(6) Declare the SnapKitActivity that will handle the deeplink
response from Snapchat !-->
<activity
android:name="com.snap.corekit.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>
...
</application>
Authenticate With Firebase
Initiate the Snapchat OAuth 2.0 authorization process:
import com.snap.loginkit.FirebaseCustomTokenResultCallback;
import com.snap.loginkit.SnapLogin;
import com.snap.loginkit.SnapLoginProvider;
import com.snap.loginkit.exceptions.FirebaseCustomTokenException;
. . .
// Get the login API
SnapLogin snapLogin = SnapLoginProvider.get(this);
// Start firebase token grant
snapLogin.startFirebaseTokenGrant(new FirebaseCustomTokenResultCallback() {
@Override
public void onSuccess(@NonNull String customToken) {
// Here you should be good to authenticate with Firebase
// using "signInWithCustomToken()" API
}
@Override
public void onFailure(@NonNull FirebaseCustomTokenException exception) {
// Here you could update your UI to show the
// Firebase token grant failure
}
});
You can find more information on the signInWithCustomToken()
API here.