1. Add our sign-in SDK to the html header of your webpage.
<script src="https://sdk.citizen.is/sdk/sdk.js"/>
2. Initialise the Citizen Sign-in modal
Required: 'authorizationCitizen' - your entity public API key.
Optional: 'redirectSuccessUrl' - the page the magic link redirects on success.
<script>
CITIZEN.init({
loginType: 'citizenMagicLinkLogin',
authorizationCitizen: '2743cf4e-0055-4a90-856e-9e0d17260c4b',
})
</script>
3. Provide a callback function for successful login.
In most scenarios, this will simply set a cookie and redirect.
<script>
let citizenSignInCallback = function(response) {
if (response.tokenStatus) {
if (response.tokenStatus === ‘GRANTED’) {
window.location.replace(‘/logged-in.html’);
} else {
console.log(‘Could not confirm email code’)
window.location.replace(‘/not-logged-in.html’);
}
} else {
console.log(‘Did not confirm email code’)
window.location.replace(‘/failed.html’);
}
}
</script>
4. Add the Citizen Sign-in button to your webpage.
Adding a button with an onclick function is enough for most scenarios.
<html>
<button class="ctznSigninButton ctznButtonSigninSubmit" onclick="signIn()">SIGN IN WITH</button>
</html>
<script>
let signIn = function() {
window.CITIZEN.login(citizenSignInCallback);
}
</script>