@ksf-media/user

User component for KSF Media apps

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ksf-media/user
0.4.1a year ago4 years agoMinified + gzip package size for @ksf-media/user in KB

Readme

ksf-media/user
User related functions for KSF Media apps. Has two important features:
  • User module (PS only), which has functions for e.g. creating and editing a user
  • Login react component (PS/JS), which is a ready-made component for logging into KSF Media apps

For javascript use

Install it from npm yarn add @ksf-media/user and just import it into your project:
import ReactDOM from 'react-dom';
import { Login } from '@ksf-media/user';
var renderLogin = function() {
  ReactDOM.render(
    <Login onUserFetchSuccess={(user) => console.log("Success!")} />
    , document.getElementById('login'));
};

Props

The props/callbacks for Login are
  • onMerge
- `() => { console.log("request to merge accounts happened") }`
  • onMergeCancelled
- `() => { console.log("merge was canceled") }`
  • onRegister
- `() => { console.log("registration form is rendered") }`
  • onRegisterCancelled
- `() => { console.log("registration is canceled") }`
  • onUserFetchFail
- `(error) => { console.log("fetching user failed!", error) }`
  • onUserFetchSuccess
- `(user) => { console.log("user fetched successfully!", user) }`
  • onLoading
- `() => { showLoadingSpinner = true }`
  • onLoadingEnd
- `() => { showLoadingSpinner = false }`
  • disableSocialLogins
- array of social login providers, where provider belongs to `{"Google", "Facebook"}`
- `disableSocialLogins={["Facebook"]}`

Getting it up and running

The Login component offers multiple ways off logging users in:
  • Persona (KSF Media's own login service)
  • Google
  • Facebook
  • SSO

Depending on the production environment we're in (dev, prod), the configuration settings for these features might differ.
Login expects the following configuration variables to be present:
  • JANRAIN_LOGIN_CLIENT_ID
  • JANRAIN_SSO_SERVER
  • JANRAIN_FLOW_VERSION
  • JANRAIN_XD_RECEIVER_PATH
  • PERSONA_URL
  • GOOGLE_CLIENT_ID
  • FACEBOOK_APP_ID

dotenv is used for setting the variables in place.
For getting the SSO working, an xdreceiver file should be found under the same domain where the app is running. The JANRAIN_XD_RECEIVER_PATH variable is the path to this file.

Logging out

It's easy. The logout function takes two callbacks: 1) function to call when logout is successful 2) function to call when logout fails
import { logout } from '@ksf-media/user';

function onLogoutSuccess() {
  console.log("Logged out successfully!");
}
function onLogoutFail(errorString) {
  console.log("Logging out failed: ", errorString);
}
logout(onLogoutSuccess, onLogoutFail);