SimpleLogin

https://simplelogin.io/docs/
Admin
SimpleLogin is an open source email aliasing service that allows you to receive and send emails...
Tokens:13,988
Snippets:215
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Requests-OAuthlib

Source: https://simplelogin.io/docs/siwsl/flask

Install the necessary library for OAuth integration. This is a prerequisite for the following examples.

```bash
pip3 install requests_oauthlib

```

--------------------------------

### Install Passport and Dependencies

Source: https://simplelogin.io/docs/siwsl/passport

Installs necessary npm packages for Passport, OpenID Connect strategy, Express, and session management.

```bash
npm install passport@^0.6.0 passport-openidconnect@0.0.2 express@^4.18.1 express-session@^1.17.3 --save

```

--------------------------------

### Example User Info Response

Source: https://simplelogin.io/docs/siwsl/implicit-flow

A sample JSON response from the SimpleLogin user info endpoint upon successful authentication.

```json
{
    "avatar_url": "https://avatar.png",
    "client": "{Your App Name}",
    "email": "EMAIL@simplelogin.co",
    "email_verified": true,
    "id": 36,
    "name": "FIRST LAST",
    "sub": "36"
}
```

--------------------------------

### Start the Express Application

Source: https://simplelogin.io/docs/siwsl/passport

Starts the Express server on port 3000 and logs a message indicating the app is listening.

```javascript
app.listen(3000, () => console.log(`App listening`))

```

--------------------------------

### Configure and Use OIDC Client for SimpleLogin

Source: https://simplelogin.io/docs/siwsl/frontend-js

Configure the `oidc-client` with your SimpleLogin AppID and authority. Use `signinRedirect` to start the login flow and `signinRedirectCallback` to handle the redirect after authentication. Replace `{your SimpleLogin AppId}` with your actual AppID.

```javascript
var settings = {
    // oidc-client will discover all OIDC settings automatically,
    // via https://app.simplelogin.io/.well-known/openid-configuration
    authority: "https://app.simplelogin.io/",
    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);
    });
}


```

--------------------------------

### Install Discourse OpenID Connect Plugin

Source: https://simplelogin.io/docs/siwsl/discourse

Clone the official OpenID Connect plugin into your Discourse container's app.yml file to enable external authentication.

```bash
sudo -E -u discourse git clone https://github.com/discourse/discourse-openid-connect.git

```

--------------------------------

### Fetch User Info with Access Token

Source: https://simplelogin.io/docs/siwsl/implicit-flow

Use the obtained `ACCESS_TOKEN` to make a GET request to the SimpleLogin user info endpoint. The token should be included in the `AUTHORIZATION` header as a Bearer token.

```javascript
fetch("https://app.simplelogin.io/oauth2/user_info", {
    method: 'GET',
    headers: {
        'AUTHORIZATION': `Bearer ${ACCESS_TOKEN}`
    }
}).then(response => response.json()).then(userInfo => {
    console.log(userInfo);
    alert(`Welcome ${userInfo.name}`);
})
```

--------------------------------

### Initialize and Login with SimpleLogin JS SDK

Source: https://simplelogin.io/docs/siwsl/intro

Include the SimpleLogin JS SDK in your HTML and use it to initialize the service and handle user login. Upon successful login, user information is logged and displayed.

```html
<button id="btn-simplelogin">
    Sign in with SimpleLogin
</button>

<div id="user-info"></div>

<!-- Include SimpleLogin JS SDK -->
<script src="https://simplelogin.io/sdk/sdk.js"></script>

<script>
// Init SimpleLogin. "quickstart" is the SimpleLogin AppID
SL.init("quickstart");

// Call SL.login when user clicks on the login button
// Upon successful login, you will have access to the user information
document.getElementById("btn-simplelogin").onclick = function(e) {
  SL.login(function(user) {
    console.log("got user from SL SDK", user);

    document.getElementById("user-info").innerHTML = `
    email: ${user.email} <br>
    name: ${user.name} <br>
    avatar: <img src="${user.avatar_url}">
    `
  })
}
</script>
```

--------------------------------

### Run the Node.js Application

Source: https://simplelogin.io/docs/siwsl/passport

Command to execute the Node.js application file.

```bash
node app.js

```

--------------------------------

### Run Local Web Server with Python

Source: https://simplelogin.io/docs/siwsl/intro

Use Python's http.server module to run a local web server for testing your SIWSL integration.

```bash
python3 -m http.server
```

--------------------------------

### Bootstrap Flask App

Source: https://simplelogin.io/docs/siwsl/flask

Initialize the Flask application and configure it to use SimpleLogin credentials. Ensure OAUTHLIB_INSECURE_TRANSPORT is disabled in production.

```python
import requests_oauthlib, os, flask

# Get SimpleLogin AppID, AppSecret from env vars
CLIENT_ID = os.environ.get("CLIENT_ID")
CLIENT_SECRET = os.environ.get("CLIENT_SECRET")

app = flask.Flask("my-app")
app.secret_key = "my-super-secret"  # for flask.session

# This allows us to test the app using HTTP.
# Please make sure to disable it in production
os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

```

--------------------------------

### Initialize SimpleLogin JS SDK

Source: https://simplelogin.io/docs/siwsl/frontend-js

Initialize the SimpleLogin JS SDK with your SimpleLogin AppID. This must be done before using other SDK functions.

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

```

--------------------------------

### HTML Structure for OIDC Client

Source: https://simplelogin.io/docs/siwsl/frontend-js

Set up basic HTML buttons to trigger the sign-in and sign-out processes for the OIDC client. Also, include the oidc-client-js library.

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

<script src="https://cdn.jsdelivr.net/gh/IdentityModel/oidc-client-js@1.8/dist/oidc-client.min.js"></script>

```

--------------------------------

### Include SimpleLogin JS SDK

Source: https://simplelogin.io/docs/siwsl/frontend-js

Include the SimpleLogin JS SDK script in your HTML file. This is the first step to using the SDK.

```html
<script src="https://simplelogin.io/sdk/sdk.js"></script>

```

--------------------------------

### Implement Callback Endpoint

Source: https://simplelogin.io/docs/siwsl/passport

Handles the callback from SimpleLogin after user authentication, exchanges the authorization code for an access token, retrieves user info, and displays a welcome message.

```javascript
// user is redirected back
app.use('/callback',
  passport.authenticate('SimpleLogin', {
    failureRedirect: '/error'
  }),
  (req, res) => {
    var user= req.user._json
    res.send(
      "Welcome ${user.name}! <br>" +
      "Your email: ${user.email} <br>" +
      "Avatar: <img src=\"" + user.avatar_url + "\">
      ")
  }
);

```

--------------------------------

### Run Local Web Server with NodeJS

Source: https://simplelogin.io/docs/siwsl/intro

Use the http-server module in NodeJS to run a local web server for testing your SIWSL integration.

```bash
npx http-server -p 8000
```

--------------------------------

### Implement Login Endpoint

Source: https://simplelogin.io/docs/siwsl/passport

Defines the '/login' endpoint to initiate the SimpleLogin authentication process by redirecting the user to the SimpleLogin authorization page.

```javascript
// redirect user to authorization page
app.use('/login', passport.authenticate('SimpleLogin'));

```

--------------------------------

### Bootstrap Express App with Passport and Session

Source: https://simplelogin.io/docs/siwsl/passport

Initializes an Express application and configures Passport with session support for user authentication.

```javascript
var express = require('express');

// For Passport
var session = require('express-session');
var passport = require('passport');
var OidcStrategy = require('passport-openidconnect').Strategy;

var app = express();

// passportjs use session to store user info
app.use(session({
  secret: 'my-super-secret',
  resave: false,
  saveUninitialized: true
}));

app.use(passport.initialize());
app.use(passport.session());

passport.serializeUser((user, next) => {
  next(null, user);
});

passport.deserializeUser((obj, next) => {
  next(null, obj);
});

```

--------------------------------

### Run Flask App

Source: https://simplelogin.io/docs/siwsl/flask

Command to run the Flask development server. Access the application via http://localhost:5000/login.

```bash
flask run

```

--------------------------------

### Listen for Authentication Messages from Popup

Source: https://simplelogin.io/docs/siwsl/implicit-flow

This JavaScript code sets up an event listener on the main window to receive authentication messages (like the access token) sent from a popup window using `postMessage`. This allows the main application to securely receive authentication data.

```javascript
window.addEventListener('onmessage', e => {
    if (e.data.auth) {
        // Get user info with the access_token
    }
})
```

--------------------------------

### Open Login Popup with SimpleLogin JS SDK

Source: https://simplelogin.io/docs/siwsl/frontend-js

Use the `SL.login()` function to open the login popup. It accepts a callback function that receives user information upon successful authentication.

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

```

--------------------------------

### SimpleLogin Authorization URL Structure

Source: https://simplelogin.io/docs/siwsl/code-flow

Construct the URL to redirect users to SimpleLogin for authorization. Ensure redirect_uri and state are properly set.

```http
https://app.simplelogin.io/oauth2/authorize
    ?response_type=code
    &client_id=CLIENT_ID
    &redirect_uri=REDIRECT_URI
    &scope=profile
    &state=STATE

```

--------------------------------

### Handle SimpleLogin Callback URL

Source: https://simplelogin.io/docs/siwsl/implicit-flow

The URL users are redirected to after authorization. It contains the access token in the fragment identifier. Ensure the `STATE` parameter matches the one generated during the login phase.

```url
REDIRECT_URI
    #state=STATE
    &scope=profile
    &access_token=ACCESS_TOKEN
```

--------------------------------

### Construct SimpleLogin Authorization URL

Source: https://simplelogin.io/docs/siwsl/implicit-flow

Build the URL to redirect users to SimpleLogin for authorization. Ensure `response_type` is set to `token` for the implicit flow. Remove line breaks before use.

```url
https://app.simplelogin.io/oauth2/authorize
    ?response_type=token
    &client_id=CLIENT_ID
    &redirect_uri=REDIRECT_URI
    &scope=profile
    &state=STATE
```

--------------------------------

### Callback Endpoint

Source: https://simplelogin.io/docs/siwsl/flask

Handle the callback from SimpleLogin after user authorization. This endpoint exchanges the authorization code for an access token and fetches user information.

```python
@app.route("/callback")
def callback():
    sl = requests_oauthlib.OAuth2Session(
        CLIENT_ID, state=flask.session.get("oauth_state")
    )
    # Get the "access token"
    sl.fetch_token(
        "https://app.simplelogin.io/oauth2/token",
        client_secret=CLIENT_SECRET,
        authorization_response=flask.request.url,
    )

    user_info = sl.get("https://app.simplelogin.io/oauth2/userinfo").json()

    # This is where you log user in,
    # for ex via flask-login extension: login_user(user)
    return f"""
    Welcome {user_info["name"]} <br>
    Your email is {user_info["email"]} <br>
    And your avatar: <img src="{user_info['avatar_url']}">
    """

```

--------------------------------

### Configure SimpleLogin OIDC Strategy

Source: https://simplelogin.io/docs/siwsl/passport

Configures the Passport OpenID Connect strategy for SimpleLogin, including issuer URLs, client credentials, and callback URL.

```javascript
// config SimpleLogin OIDC (OpenID Connect) provider
passport.use('SimpleLogin', new OidcStrategy({
  // SimpleLogin OIDC Settings
  issuer: 'https://app.simplelogin.io',
  authorizationURL: 'https://app.simplelogin.io/oauth2/authorize',
  tokenURL: 'https://app.simplelogin.io/oauth2/token',
  userInfoURL: 'https://app.simplelogin.io/oauth2/userinfo',
  // SimpleLogin App Credential from env
  clientID: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  // you might need to change the callbackURL when deploying on production
  callbackURL: 'http://localhost:3000/callback',
  // openid needs to be in scope
  scope: 'openid'
}, (issuer, sub, profile, accessToken, refreshToken, done) => {
  return done(null, profile);
}));

```

--------------------------------

### Handle SimpleLogin OAuth2 Callback and Fetch User Info

Source: https://simplelogin.io/docs/siwsl/implicit-flow

This JavaScript code handles the callback from SimpleLogin after successful authorization. It verifies the state parameter for security and then uses the obtained access token to fetch user information via the /user_info endpoint.

```javascript
// if accessToken is found, then it's the callback
    let accessToken = getQueryParam("access_token");

    if (accessToken) {
        // Check if state has changed
        state = getQueryParam("state");

        if (state != sessionStorage.getItem("state")){
            // CSRF attack
            alert("nice try! Or you need to enable sessionStorage ...");
        }

        // get user info
        fetch("https://app.simplelogin.io/oauth2/user_info", {
            method: 'GET',
            headers: {
                'AUTHORIZATION': `Bearer ${accessToken}`
            }
        }).then(response => response.json()).then(userInfo => {
            console.log(userInfo);
            alert(`Welcome ${userInfo.name}`);
        })
```

--------------------------------

### Export Environment Variables for SimpleLogin App Credentials

Source: https://simplelogin.io/docs/siwsl/code-flow

Set your SimpleLogin App ID and App Secret as environment variables. These are required for authentication.

```bash
export CLIENT_ID={your_app_id}
export CLIENT_SECRET={your_app_secret}

```

--------------------------------

### Open Popup for SimpleLogin Authentication

Source: https://simplelogin.io/docs/siwsl/implicit-flow

This JavaScript code snippet demonstrates how to open a new window for the SimpleLogin authentication process. This is useful for implementing a popup-based OAuth flow, keeping the user on the current page.

```javascript
const authWindow = window.open(
        "/redirect.html",'SimpleLoginPopup',
        {}
);
```

--------------------------------

### Rebuild Discourse Container

Source: https://simplelogin.io/docs/siwsl/discourse

After adding the plugin, rebuild your Discourse container to apply the changes. This process may take several minutes.

```bash
cd /var/discourse
./launcher rebuild app

```

--------------------------------

### Initiate SimpleLogin OAuth2 Authorization

Source: https://simplelogin.io/docs/siwsl/implicit-flow

Use this JavaScript function to initiate the OAuth2 authorization flow. Replace 'YOUR_APP_ID' with your actual AppID and ensure the redirect_uri matches your application's configured URI. The state parameter is used for CSRF protection.

```javascript
function simpleLogin() {
        let appId = "YOUR_APP_ID";
        let state  = randomString();

        // save state into sessionStorage to check later in the callback
        sessionStorage.setItem("state", state);

        let url = "https://app.simplelogin.io/oauth2/authorize" +
            "?response_type=token"
            `&client_id=${appId}` +
            "&redirect_uri=http://localhost:8000" +
            "&scope=profile" +
            `&state=${state}`

        // redirect user to SimpleLogin
        location.href = url;
    }
```

--------------------------------

### SimpleLogin Authorization URL Format

Source: https://simplelogin.io/docs/siwsl/errors

This is the standard format for the SimpleLogin authorization URL. Ensure your `client_id` and `redirect_uri` are correctly set.

```url
https://app.simplelogin.io/oauth2/authorize
        ?response_type=[code|token]
        &client_id=CLIENT_ID
        &redirect_uri=REDIRECT_URI
        &scope=profile
        &state=STATE
```

--------------------------------

### Trigger Login Popup on Button Click

Source: https://simplelogin.io/docs/siwsl/frontend-js

Attach the `SL.login()` function to a button's click event to initiate the login process when the button is clicked. Ensure the button has the ID 'btn-simplelogin'.

```javascript
document.getElementById("btn-simplelogin").onclick = function(e) {
  SL.login(function(user) {
      console.log(user)
  })
}

```

--------------------------------

### Login Endpoint

Source: https://simplelogin.io/docs/siwsl/flask

Implement the /login endpoint to redirect users to SimpleLogin's authorization page. The state parameter is crucial for CSRF protection.

```python
import requests_oauthlib, os, flask

@app.route("/login")
def login():
    sl = requests_oauthlib.OAuth2Session(
        CLIENT_ID,
        # this supposes you are running your app on the default port 5000
        redirect_uri="http://localhost:5000/callback",
    )

    redirect_url, state = sl.authorization_url(
        "https://app.simplelogin.io/oauth2/authorize"
    )

    # State is used to prevent CSRF, keep this for later.
    flask.session["oauth_state"] = state

    return flask.redirect(redirect_url)

```

--------------------------------

### Send Authentication Data via postMessage

Source: https://simplelogin.io/docs/siwsl/implicit-flow

After authentication in a popup window, this JavaScript code sends the access token back to the opener (main) window using `postMessage`. Ensure the target origin is correctly set to prevent security issues.

```javascript
window.opener.postMessage(
  { auth: { token: access_token } },
  window.opener.location
);
```

--------------------------------

### Callback URL Structure from SimpleLogin

Source: https://simplelogin.io/docs/siwsl/code-flow

The URL SimpleLogin redirects users back to after authorization. It includes a 'code' and 'state' for further processing.

```http
REDIRECT_URI
    ?code=CODE
    &state=STATE

```

--------------------------------

### Construct OAuth2 Authorization URL

Source: https://simplelogin.io/docs/siwsl/intro

Generate the redirection URL for SimpleLogin authorization, including your AppID and callback URL.

```string
https://app.simplelogin.io/oauth2/authorize?client_id={AppID}&redirect_uri={your_callback_url}
```

--------------------------------

### Successful Token Exchange Response from SimpleLogin

Source: https://simplelogin.io/docs/siwsl/code-flow

A successful response from the token exchange endpoint includes an access token, expiration time, scope, token type, and user information.

```json
{
    "access_token": "LONG_STRING",
    "expires_in": 3600,
    "scope": "profile",
    "token_type": "Bearer",
    "user": {
        "avatar_url": "https://avatar.png",
        "client": "YOUR_APP_NAME",
        "email": "EMAIL@simplelogin.co",
        "email_verified": true,
        "id": 36,
        "name": "FIRST LAST",
        "sub": "36"
    }
}

```

--------------------------------

### Implicit Flow Redirect URL

Source: https://simplelogin.io/docs/siwsl/intro

The URL format for the Implicit Flow, where the access token is appended to the redirect URI using a fragment identifier.

```string
{your_callback_url}#access_token={access_token}
```

--------------------------------

### Exchange Authorization Code for Access Token using cURL

Source: https://simplelogin.io/docs/siwsl/code-flow

Use a POST request to exchange the received authorization code for an access token. Include your client ID and secret.

```curl
curl -X POST https://app.simplelogin.io/oauth2/token \
    -F 'grant_type=authorization_code' \
    -F 'code=CODE' \
    -F 'redirect_uri=REDIRECT_URI' \
    -F 'client_id=CLIENT_ID' \
    -F 'client_secret=CLIENT_SECRET'

```

--------------------------------

### Utility Functions for OAuth2 Flow

Source: https://simplelogin.io/docs/siwsl/implicit-flow

These JavaScript utility functions are essential for the OAuth2 flow. `getQueryParam` extracts URL parameters, and `randomString` generates a secure random string for the state parameter.

```javascript
// utility function to get query value from url
    function getQueryParam(key) {
        var half = location.href.split(key + '=')[1];
        return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
    }

    // generate a 15-char string
    function randomString(){
        return Math.random().toString(36).slice(-15);
    }
```
Tokens:
Raw