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 userLogin
react component (PS/JS), which is a ready-made component for logging into KSF Media apps
For javascript use
Install it from npmyarn 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 forLogin
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
TheLogin
component offers multiple ways off logging users in:- Persona (KSF Media's own login service)
- 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. Thelogout
function takes two callbacks:
1) function to call when logout is successful
2) function to call when logout failsimport { logout } from '@ksf-media/user';
function onLogoutSuccess() {
console.log("Logged out successfully!");
}
function onLogoutFail(errorString) {
console.log("Logging out failed: ", errorString);
}
logout(onLogoutSuccess, onLogoutFail);