HTML/Web
Getting started with Swoop only requires a few lines of Javascript. This guide will show you how to hook up Swoop Authentication to any button on your site.
If you want to see a working demo/example, head on over to Code Sandbox.
Adding Swoop to your existing site can be done in 3 simple steps.
1. Add the Swoop JS to your page's head
<script src="https://cdn.jsdelivr.net/npm/@swoop-password-free/[email protected]/dist/swoop.js"></script>
2. Initialize Swoop With Your Client ID
Make sure you have registered for a new App in the Swoop Dashboard
<script>
let swoop = new Swoop("swoop_lvl5p4ktivubcw", {}, (user) => {
console.log(user);
// user.email
// user.id_token
// user.user_meta
// Send user.id_token to your backend to complete authentication and log the user in
});
</script>
The Swoop constructor takes 3 parameters.
| Parameter | Type | Description |
|---|---|---|
clientId | string | This is the clientId of the app you are swooping in to. You can register for a clientId on the Swoop Dashboard |
config | object | This allows you to override some of Swoop's configuration. Possible values are:{ session: false }Setting session to false will force Swoop to not save your user's session locally. |
cb | object | Callback function to be invoked when a user successfully authenticates. It takes one parameter which will be the user object of the authenticated user. |
Once the user has authenticated with Swoop, they will be redirected back to your web app. The callback function will be invoked and the user object will contain the following information.
{
"loggedIn": true,
"email": "[email protected]",
"id_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI1ZTFmNzk1NjYxMzgxYzJhZDcwYTg3MjkiLCJhdWQiOiJzd29vcF80cTVjOXE0a2xxejB3N2UiLCJpYXQiOjE2MjE0MzQ3MTUsImV4cCI6MTYyNDAyNjcxNSwidHlwZSI6ImlkIiwiZW1haWwiOiJ1c2VyQHN3b29wbm93LmNvbSJ9.l9xdmbux-Ek7lvfLmw01UCgFxalV0MLXxQrWhKRaiTQ",
"uid": "5e1f795661381c2ad70a8729"
}
3. Start The Authentication Flow
<button onclick="swoop.in(); return false;">Login</button>
And that's it! Your users are now entered into a Password-Free Paradise.
If you want to pass additional information through Swoop (such as registration form information), swoop.in() takes an object as an optional parameter.
<button onclick="swoop.in({'first_name': 'Tom', 'last_name': 'bombadil'}); return false;">Login</button>
When the authentication completes the user.user_meta object will contain the keys and values that you passed in here. This allows you to use Swoop for things like User Registration and Captcha.
Security Note
Once the user is authenticated, you should send the user.id_token to your server to be verified with your CLIENT SECRET to ensure the token is valid.
Updated over 2 years ago