Authenticate Your Users with Snapchat’s Login Kit
Often times, especially at a hackathon, you’ll want a pretty quick way to implement sign-in. Rather than implementing user accounts and storing passwords yourself, you can use a third party to manage all of this for you. There are many options out there, but I’m going to make the case that you should use Snap Kit. It’s quick and easy, and it’s particularly useful if you want to use Snapchat’s other APIs. In this tutorial, I’ll show you how to implement logging in with Snapchat in just a couple of lines of code.
Configure Your Project
Start by creating an account on the Snap Kit website (if you already have a Snapchat account, you can use that instead). Once you’ve verified your email address and accepted their developer agreement, navigate to the “my apps” page and click the big plus to create a new app. You can pick any name for your app, and you should leave all of the other options on their default settings.
Next, scroll down to the section where you can select the kits you’re going to use. Snapchat offers four different kits, but for this tutorial, we’re only going to use the Login Kit. Toggle this one on, and leave the other ones off.
Next, you’ll need to set the valid redirect URLs for your app. Login Kit uses OAuth, which redirects users back to your website after they finish logging in with Snapchat. For this tutorial, we’ll be deploying to http://localhost:8000 (your local machine), so this is the URL you should enter here. If you’re using a different URL to deploy your website, you should enter that URL here instead. To learn more about how this works, read about redirect URLs on the official OAuth website.
Next, scroll down to the section where you can configure your OAuth client. Make sure that you’re looking at the one that says development environment (as opposed to production environment). If you use the OAuth client ID from the production environment section, your code will not work! This ID is intended to be used in apps that have gone through Snapchat’s app review process. Once you’re in the right section, turn on the “web” switch, and copy the client ID listed below. You’ll need it pretty soon!
At this point, if you’ve saved your client ID, you can close Snap Kit’s website. We’re done configuring the app on Snapchat’s side; it’s time to write some code.
Write Your Site’s Code
For this tutorial, we’re going to build a static website (instead of using something like Node.js, since we don’t need a backend to use Login Kit). Create a folder with two files, index.html and style.css. You can do this with a few commands in your terminal:
mkdir login-demo
cd login-demo
touch index.html
touch style.cssPaste the following code into your style.css file:
* {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
#container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#login-button button {
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
}This file will provide some basic styling for our frontend app. Now, paste the following code into your index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Snapchat Login Demo</title>
</head>
<body>
<div id="container">
<div id="login-button"></div>
<div id="profile" class="hidden">
<img id="picture" src="#" />
<p id="welcome">Welcome!</p>
</div>
</div>
</body>
<script>
window.snapKitInit = () => {
snap.loginkit.mountButton("login-button", {
clientId: "[INSERT YOUR CLIENT ID HERE]",
redirectURI: "http://localhost:8000",
scopeList: [
"user.display_name",
"user.bitmoji.avatar",
],
handleResponseCallback: () => {
snap.loginkit.fetchUserInfo().then(data => {
document.getElementById("login-button").classList.add("hidden")
document.getElementById("profile").classList.remove("hidden")
document.getElementById("picture").src = data["data"]["me"]["bitmoji"]["avatar"]
document.getElementById("welcome").innerHTML = "Welcome, " + data["data"]["me"]["displayName"] + "!"
})
},
})
}
// Load the SDK asynchronously
(function (d, s, id) {
var js, sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://sdk.snapkit.com/js/v1/login.js";
sjs.parentNode.insertBefore(js, sjs);
}(document, "script", "loginkit-sdk"));
</script>
</html>Make sure to insert your client ID from earlier on line 19, where I left a placeholder. The file has some basic HTML, along with some Javascript to load Login Kit and handle the login flow.
Test Your App
Now that you’re done writing your app’s code, run python -m http.server in your terminal while in your project’s directory to create a local webserver (if you have Python 2 installed instead of Python 3, this command will be python -m SimpleHTTPServer). Open http://localhost:8000 in your browser, and you should see a page with a yellow button like the one below.
Click the button and you should see Snapchat’s OAuth popup. Log in with your Snapchat account, and click “Continue” on the next page, which should look like the one in the screenshot below:
Snapchat will redirect you to your app, and you’ll see your name and your bitmoji (if you have one) instead of the Snapchat login button. If any of your friends log into your app, they’ll see their name and bitmoji instead. If you get an error, double check your app details in Snap Kit. You may not have turned “Web” on or used the development environment version of your client ID.
If all goes well, you should see your page turn into something like the one pictured above! (I promise this isn’t what I look like in real life). This will work for the Snapchat account you used to earlier for Snap Kit, but if you want any of your friends to be able to use your project, you’ll need to make one more change. On the bottom of your project’s page, you can add your friends’ usernames under “Demo Users,” as shown below. Otherwise, they won’t be able to use your app.
Congratulations, you’ve just added authentication to a simple web app! This works similarly to how many websites today will allow you to log in with your Facebook or Google accounts, and allows you to have an account without the hassle of remembering another password. Whether you’re hacking with Snap Kit or building something completely unrelated to Snapchat, Login Kit is an easy way to implement user accounts at your next hackathon.
