Global

This function is used for getting the logged-in user's details. If the user is not logged in, then currentUser() will return { "error": { "message": "Could not find qt-auth cookie or X-QT-AUTH header, please Login." } } Example:

import { currentUser } from '@quintype/bridgekeeper-js';

const getUserDetails = async () => {
 const member = await currentUser();
 //using the above response the member status can be updated on the UI
};
<button onClick={getUserDetails}>User Profile</button>

This function is used for sending the reset password link to the registered email id.

import { forgotPassword } from '@quintype/bridgekeeper-js';

const forgotPasswordHandler = async e => {
  e.preventDefault();
  e.stopPropagation();
try {
   const { message } = await forgotPassword({email: "john@gmail.com"});
    console.log(message, "message");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={forgotPasswordHandler}>Forgot Password</button>

This function is used for Automatic Single Sign On (SSO) using OAuth 2.0. Example:

import { getAutoSSOUrl } from '@quintype/bridgekeeper-js';
...
const callbackUrl = get(params, ["query", "callback_uri"], global.location && global.location.origin);
const redirectUrl = get(params, ["query", "redirect_uri"]) || get(publisherAttributes, ["sso_login", "redirect_Url"], "");
const queryParams = new URLSearchParams(window.location.search);
const queryParamExists = queryParams.has("logged_in");

if (isAutoSSOEnabled && !queryParamExists) {
  const autoSsoUrl = getAutoSSOUrl(clientId, redirectUrl, window.location.href);
  window.location.replace(autoSsoUrl);
}

This function is used to get oauth authorization url. An api call will be made to this url from the client side.

Example:

import { getOauthAuthorizeUrl } from '@quintype/bridgekeeper-js';
...
const callbackUrl = get(params, ["query", "callback_uri"], global.location && global.location.origin);
const redirectUrl = get(params, ["query", "redirect_uri"]) || get(publisherAttributes, ["sso_login", "redirect_Url"], "");
if (window) {
 const oauthAuthorizeUrl = getOauthAuthorizeUrl(clientId, redirectUrl, window.location.href);
 window.location.replace(oauthAuthorizeUrl);
}

This function is used for user login. Example:

import { login } from '@quintype/bridgekeeper-js';
const loginHandler = async e => {
 e.preventDefault();
 e.stopPropagation();
 const userObj = {
  username: "johndoe",
  email: "johndoe001@gmail.com",
  password: "password"
 };

login(userObj)
.then(({ user }) => console.log("do your stuff on successful login", user));
.catch(err => console.log("Error", err.message));
}

<button onClick={() => loginHandler()}>Login</button>

This function logs out the current user and kills the current session. Once the logout function is executed a response code of 204 is returned with No Content. Example:

import { logout } from '@quintype/bridgekeeper-js';

const logoutHandler = async () => {
  const response = await logout();
  //using the above response the member status can be updated on the UI
};
<button onClick={logoutHandler}>Logout</button>

This function is used for Single Sign On (SSO) using OAuth 2.0. Example:

import { oauthAuthorize } from '@quintype/bridgekeeper-js';

...

const currentPath = useSelector(state => get(state, ["qt", "currentPath"], ""));
const params = parseUrl(currentPath);
const callbackUrl = get(params, ["query", "callback_uri"], global.location && global.location.origin);
const redirectUrl = get(params, ["query", "redirect_uri"]) || get(publisherAttributes, ["sso_login", "redirect_Url"], "");
const oauthResponse = await oauthAuthorize(51, redirectUrl, callbackUrl, allowAjax=true);
if (oauthResponse.redirect_uri) window.location.href = oauthResponse.redirect_uri;

This function is used for registration. Example:

import { register, sendOtp } from '@quintype/bridgekeeper-js';

const signUpHandler = async e => {
 e.preventDefault();
 e.stopPropagation();
 const userObj = {
   name: userInfo.name,`
   email: userInfo.email,
   username: userInfo.email,
   password: userInfo.password,
   "dont-login": false
 };

 try {
   const {user} = await register(userObj);
    return sendOtp(user.email); // Can call updateOtp as well
  } catch(err) {
     console.log(err);
  }
};

<button aria-label="signup-button" onClick={signUpHandler} >Sign Up</button>

This function is used for resetting the password with otp.

import { resetPassword } from '@quintype/bridgekeeper-js';

const resetPassword = async e => {
  e.preventDefault();
  e.stopPropagation();
const passwordDetails = {
 "email": john@gmail.com,
 "otp": "12345",
 "new-password": "newPassword"
}
try {
   const { message } = await resetPassword(passwordDetails);
    console.log(message, "message");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={resetPassword}>Reset password</button>

This function is used for resetting the password with token.

import { resetPasswordWithToken } from '@quintype/bridgekeeper-js';

const resetPasswordHandler = async e => {
  e.preventDefault();
  e.stopPropagation();
const passwordDetails = {
 "confirm-password": "newPassword",
 "token": "token-id",
 "new-password": "newPassword"
}
try {
   const { message } = await resetPasswordWithToken(passwordDetails);
    console.log(message, "message");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={resetPasswordHandler}>Reset password</button>

This function is used for sending otp to user email. Example:

import { sendOtp, register } from '@quintype/bridgekeeper-js';

try {
   const {user} = await register(userObj);
    return sendOtp(user.email); // Can call updateOtp as well
  } catch(err) {
     console.log(err);
 }

This function is used for sending verification link to user email. Example:

import { sendVerificationLink, register } from '@quintype/bridgekeeper-js';

try {
   const {user} = await register(userObj);
    return sendVerificationLink(user.email, "/");   // the redirect url ("/") can be any location where you want to redirect post verfying
  } catch(err) {
     console.log(err);
 }

This function is used for signing the image. Example:

import { signImage } from '@quintype/bridgekeeper-js';

const signImageHandler = async e => {
 e.preventDefault();
 e.stopPropagation();
 const fileName = "sample.jpeg"
 const mimeType = "image/jpeg"

try {
   await signImage(fileName, mimeType);
    console.log("successfully signed the image");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={signImageHandler}>Sign Image</button>

This function is used for updating user profile. Example:

import { updateUserProfile } from '@quintype/bridgekeeper-js';

const updateUserProfileHandler = async e => {
 e.preventDefault();
 e.stopPropagation();
 const userObj = {
   name: "john",
   "phone-number": xxxxxxxxxx,
   "email": "abc@gmail.com",
 };

try {
   await updateUserProfile(userObj);
    console.log("successfully updated profile");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={updateUserProfileHandler}>Update Profile</button>

This function is used for validating otp. Example:

import { updateWithOtp, getCurrentUser } from '@quintype/bridgekeeper-js';

const otpHandler = async e => {
  e.preventDefault();
  e.stopPropagation();

try {
   await updateWithOtp(otp);
    await getCurrentUser();
    console.log("successfully login");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={otpHandler}>Verify OTP</button>

This function is used for uploading the image to the s3-bucket. Example:

import { uploadS3ToTemp } from '@quintype/bridgekeeper-js';

const uploadS3ToTempHandler = async e => {
 e.preventDefault();
 e.stopPropagation();
 const requestBody = {key: key-from-the-response
                      Content-Type: Content-Type-from-the-response
                      policy: policy-from-the-response
                      acl: acl-from-the-response
                      success_action_status: success-action-status-from-the-response
                      AWSAccessKeyId: AWSAccessKeyId-from-the-response
                      signature: signature-from-the-response
                      file: image-file-to-be-uploaded-as-binary-data}

try {
   await uploadS3ToTemp(url, requestBody);
    console.log("successfully uploaded the image to the s3-bucket");
  } catch (err) {
    console.warn("error", error);
  }
};

<button onClick={uploadS3ToTempHandler}>Upload Image</button>

This function is used for apple login .

Example

import { withAppleLogin } from '@quintype/bridgekeeper-js';

function appleOnClick(e, loginPath) {
  window.location.href = serverSideLoginPath;
}

const urlToBeRedirected = window.location.href; // or to any desired page location

const AppleLogin = () => {
 const { serverSideLoginPath } = withAppleLogin(urlToBeRedirected);
  return (
    <Button color="#3b5998" flat href={serverSideLoginPath} onClick={e => appleOnClick(e, serverSideLoginPath)} socialButton>
      <span styleName="icon">
        <AppleIcon />
      </span>{" "}
      Apple
   </Button>
  );
};

This function is used for facebook login.

Client Side Login

import { withFacebookLogin } from '@quintype/bridgekeeper-js';

function socialLogin(e, login) {
  e.preventDefault();
  login().then(() => console.log("successfully login")); // Can also make an API call to /api/v1/members/me
}

const urlToBeRedirected = window.location.href; // or to any desired page location

const FaceBookLogin = () => {
 const { login } = withFacebookLogin({
   appId: fb-app-id,
   scope: "email",
   emailMandatory: true,
   redirectUrl: currentLocation
 });
  return (
    <Button color="#3b5998" flat onClick={e => socialLogin(e, login)} socialButton>
      <span styleName="icon">
        <FbIcon color="#3b5998" width={9} height={15} />
      </span>{" "}
      Facebook
   </Button>
  );
};

Server Side Login

import { withFacebookLogin } from '@quintype/bridgekeeper-js';

const urlToBeRedirected = window.location.href; // or to any desired page location

const FaceBookLogin = () => {
 const { serverSideLoginPath } = withFacebookLogin({
   scope: "email",
   emailMandatory: true,
   redirectUrl: currentLocation
 });
  return (
    <Button color="#3b5998" flat href={serverSideLoginPath} socialButton>
      <span styleName="icon">
        <FbIcon color="#3b5998" width={9} height={15} />
      </span>{" "}
      Facebook
   </Button>
  );
};

This function is used for google login .

Client Side Login

import { withGoogleLogin } from '@quintype/bridgekeeper-js';

function socialLogin(e, login) {
  e.preventDefault();
  login().then(() => console.log("successfully login")); // Can also make an API call to /api/v1/members/me
}

const urlToBeRedirected = window.location.href; // or to any desired page location

const GoogleLogin = () => {
 const { login } = withGoogleLogin({
   clientId: client-id,
   scope: "email",
   emailMandatory: true,
   redirectUrl: currentLocation
  });
  return (
    <Button
      color="#dd4b39"
      flat
      onClick={e => googleOnClick(e, login)}
      socialButton
    >
      <span styleName="icon">
        <Google />
      </span>{" "}
      Google
    </Button>
  );
};

Server Side Login

import { withGoogleLogin } from '@quintype/bridgekeeper-js';
const urlToBeRedirected = window.location.href; // or to any desired page location

const GoogleLogin = () => {
 const { serverSideLoginPath } = withGoogleLogin({
   scope: "email",
   emailMandatory: true,
   redirectUrl: currentLocation
  });
  return (
    <Button
      color="#dd4b39"
      flat
      href={serverSideLoginPath}
      socialButton
    >
      <span styleName="icon">
        <Google />
      </span>{" "}
      Google
    </Button>
  );
};

This function is used for linkedin login.

import { withLinkedinLogin } from '@quintype/bridgekeeper-js';

const urlToBeRedirected = window.location.href; // or to any desired page location

const LinkedinLogin = () => {
 const { serverSideLoginPath } = withLinkedinLogin({
   scope: "email",
   emailMandatory: true,
   redirectUrl: currentLocation
 });
  return (
    <Button color="#3b5998" flat href={serverSideLoginPath} socialButton>
      <span styleName="icon">
        <LinkedinIcon color="#3b5998" width={9} height={15} />
      </span>
      LinkedIn
   </Button>
  );
};

This is an abstract render props function for logging in with social accounts. The function adds two items to scope: serverSideLoginPath for redirecting to server side, and login for doing a client side login. Calling login() returns a promise which can be used to handle success and failure cases.

This function should not be used directly. This will inturn gets called in WithFacebookLogin, WithGoogleLogin and WithAppleLogin functions.