Skip to content
Browse files

add frontend js doc

  • Loading branch information...
nguyenkims committed Aug 19, 2019
1 parent e8d88b1 commit 984742e1d0a5903ee326ff0ab8fef43777e40549
Showing with 122 additions and 3 deletions.
  1. +118 −0 content/docs/
  2. +4 −3 content/menu/
  3. BIN static/images/popup.png
@@ -0,0 +1,118 @@
# Frontend JS

For Frontend JS (as opposed to Backend Node.js) you can use the **Implicit Flow** to log user in.

We recommend using [SimpleLogin JS SDK](, which is actually a thin layer over [hello.js]( For this reason, you can also use `hello.js` if you app already uses this library.

For the web, there are 2 ways to use SimpleLogin in terms of user experience:

- With popup: when clicking on **Login with SimpleLogin** a new window popup is opened and closed once user approves.

{{< figure src="/images/popup.png" caption="With Popup" >}}

- Without popup: in the same window/tab user is redirected to SimpleLogin authorization page and returns back to your app once they approves.

We recommend the **with popup** way so you don't have to deal with state saving when browser reloads in **without popup**.

By default, the **SimpleLogin JS SDK** uses the **with popup** way.

Please find below different ways to add SimpleLogin into your webapp:

- [SimpleLogin JS SDK](
- [oidc-client](

## SimpleLogin JS SDK

First include it in your html:

<script src=""></script>

In your `js`, you need to init the SDK with your SimpleLogin AppID:

SL.init("{your SimpleLogin AppID}");

To open the login popup, use `SL.login()` which takes a callback as parameter: the callback will receive user info when they approves on SimpleLogin authorization page.

SL.login(function(user) {
console.log("got user from SL SDK", user);

The `SL.login` is typically called inside a function onclick:

document.getElementById("btn-simplelogin").onclick = function(e) {
SL.login(function(user) {

## OIDC Client

[oidc-client]( adds OpenID Connect (OIDC) and OAuth2 protocol support for browser-based JavaScript applications.

This library is behind [redux-oidc]( for ReactJS / Redux, [vuejsoidcclient]( for Vue.js, [Angular2OidcClient]( for Angular, so if you use these web libraries, adding SimpleLogin should be a matter of changing `authority` setting to

`oidc-client` is quite a _low-level_ library and offers a lot of flexibility. It separates the login step and the callback step.

Let's start by creating a `index.html`:

<button onclick="startSignin()">start signin</button>
<button onclick="endSignin()">end signin</button>

<script src=""></script>

And add the `js` code, make sure to replace `{your SimpleLogin AppId}` by your AppID.

var settings = {
// oidc-client will discover all OIDC settings automatically,
// via
authority: "",
client_id: "{your SimpleLogin AppId}",
response_type: 'id_token token',
// openid in scope to indicate this is OpenID Connect
scope: 'openid',
// You need to update this redirect_uri when deploying to production
redirect_uri: "http://localhost:8000",
var mgr = new Oidc.UserManager(settings);
function startSignin() {
mgr.signinRedirect({state:"some data"}).then(function() {
console.log("signinRedirect done");
function endSignin() {
mgr.signinRedirectCallback().then(function(user) {
console.log("signed in", user);

Now if you run the a local web server (using `python3 -m http.server` for example), you should be able to login with SimpleLogin when you open http://localhost:8000

@@ -5,7 +5,8 @@ headless: true
- [**Introduction**]({{< relref "/" >}})
- [App]({{< relref "/docs/" >}})
- **Guides**
- [Flask]({{< relref "/docs/" >}})
- [Django]({{< relref "/docs/" >}})
- [Passport]({{< relref "/docs/" >}})
- [Frontend-JS]({{< relref "/docs/" >}})
- [Flask (Python)]({{< relref "/docs/" >}})
- [Passport (Node.js)]({{< relref "/docs/" >}})

Binary file not shown.

1 comment on commit 984742e


This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.