Step 3.1: Front-end

Integrate SimpleLogin into a single-page app or mobile app

If your app is a Single-page application or a Mobile app, the OAuth 2.0 Implicit Grant is used. In this flow, you only need the client-id.

This flow happens through 2 redirections:

  • First redirection brings user to SimpleLogin authorization page when user clicks on the button Connect with SimpleLogin

  • Second redirection brings user back to your webapp/mobile app when user allows sharing their data with your app.

The first redirection url contains the following information:

  • your client_id

  • response_type=token to indicate implicit grant flow.

  • the second redirection url that user is redirected back at the second step.

  • [Optional but highly recommended] a state which will be returned back in the second redirection. This state can prevent the CSRF attack.

This url will look like the following. Please note that the line break is for visual purpose only, you should remove it in the code.

https://app.simplelogin.io/oauth2/authorize
?response_type=token
&client_id={your_client_id}
&redirect_uri={your_url}
&state=random_string

When user allows your app to have access to their data, SimpleLogin redirects user back to your website along with an access_token .This url will look like:

https://{your_url}
?state=random_string
&access_token=long_string

With the access_token, you can obtain user information by calling the userinfo endpoint from your app.

fetch('https://app.simplelogin.io/oauth2/userinfo/?access_token={access_token}')
.then(function(response) {
return response.json();
})
.then(function(userInfo) {
console.log(JSON.stringify(userInfo));
});

In case your library supports OpenID Connect, user id_token can also be passed in this redirection url. The id_token is actually a JWT token containing user information such as user email, user name, you can therefore decode it to get user information instead of calling the userinfo endpoint.

Please find here examples of SimpleLogin integration using OAuth/OpenID library:

JSO: https://github.com/simple-login/simplelogin-jso-example

OpenIdConnect.js: https://github.com/simple-login/simplelogin-openidconnect-example

Examples for ReactJS, VueJS, Angular are coming.

By default, localhost website are authorized. For production deployment, you would need to add your website url into Authorized URIs on SimpleLogin developer page.