mf-social-login-dropin v1.0.0

social-login

social login dropin components

Install

npm install --save mf-social-login-dropin

Usage Pre-Notes

In order to properly use this module your server will need the following setup

1. Passport with various social logins already setup
2. Passport JWT support
3. A Redirect URL defined on the server that appends a JWT token receieved once a successful login happens

The way the module works is as follows

1. Force the window location to your authentication endpoint. In the example this is <your_url_here>/api/auth/facebook/login.

   • this initializes the login flow dictated by the server.
   • <your_url_here> represents the URL of your API
   • the /api/auth/facebook/login is an arbitrary path defined on the authentication server. This could also be different based on your own configuration and endpoints.

2. The server will send back a redirect at the path you define. In this example, the authentication server will redirect to localhost:3000/auth?token=<my_token>.

   • the redirect is transparent as the component handles the redirect.
   • if React Router is used, this component should be assigned a path to handle authentication. In the example case, the path is auth.

3. Defining our pathName, tokenPathName, and callback function onTokenReceived we should be able to automatically receive an authenticated JWT token to begin talking with our server.

Login Flow visualization

Browser is redirected to social login URL => server authenticates / validates credentials => server returns JWT token inside the URL

Usage

import React, { Component } from "react";

import ExampleComponent from "social-login";

export default class App extends Component {
  render() {
    return (
      <div>
        <ExampleComponent
          pathName="auth"
          tokenPathName="token"
          onTokenReceived={token => {
            console.log(`Called received token ${token}`);
          }}
        />
        <button
          onClick={() => {
            window.location = "<your_url_here>/api/auth/facebook/login";
          }}
        >
          Facebook
        </button>
        <button
          onClick={() => {
            window.location = "<your_url_here>/api/auth/google/login";
          }}
        >
          Google
        </button>
      </div>
    );
  }
}

License

MIT © Mobile First LLC