@monash/portal-auth 0.0.4

package/README.md

@@ -0,0 +1,39 @@
+# @monash/portal-auth
+
+Monash react components
+
+## Features
+
+- ES6 syntax, managed with Prettier + Eslint and Stylelint
+- Unit testing via Jest
+- React 17
+
+## Install
+
+```sh
+yarn add @monash/portal-auth
+// or 
+npm i @monash/portal-auth
+```
+
+### Requirements
+
+- Node.js `v14.x` or later
+- React 17
+- Firebase
+
+
+### Usage
+
+```js
+import { AuthContext } from '@monash/portal-auth';
+import { App } from './app';
+import * as ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  <AuthContext>
+    <App />
+  </AuthContext>,
+  document.getElementById('root')
+);
+```

package/dist/components/AuthContext.js

@@ -0,0 +1,152 @@
+import React, { useState, createContext, useEffect } from 'react';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+
+const AuthContext = createContext();
+
+const getSNSProvider = sns => {
+  switch (sns) {
+    case 'Google':
+      return new firebase.auth.GoogleAuthProvider();
+    default:
+      throw new Error("[Auth] Unsupported SNS: " + sns);
+  }
+};
+
+const SSO_ATTEMPTED = 'sso_attempted';
+const SSO_ERROR = 'sso_error';
+const TRUE_VALUES = ['true', 'True', 'TRUE', true, 1];
+const FIREBASE_CUSTOM_TOKEN = 'firebase_custom_token';
+
+const ssoSession = {
+  setAttempted: attempted => {
+    sessionStorage.setItem(SSO_ATTEMPTED, TRUE_VALUES.includes(attempted));
+  },
+  isAttempted: () => {
+    return TRUE_VALUES.includes(sessionStorage.getItem(SSO_ATTEMPTED));
+  }
+};
+
+const getCallbackParams = () => {
+  if (window.location.search === "") return { code: null, state: null };
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const code = urlParams.get('code');
+  const state = urlParams.get('state');
+
+  const errorCode = urlParams.get('error');
+  const errorDescription = urlParams.get('error_description');
+  if (errorCode) {
+    let error = new Error(errorDescription);
+    error.code = errorCode;
+    throw error;
+  }
+
+  return { code, state };
+};
+
+const AuthProvider = props => {
+
+  const auth = props.fbAuth;
+  const oktaLoginUrl = props.oktaLoginUrl;
+  const callbackPath = props.callbackPath;
+  const tokenApi = props.tokenApi;
+  const nolanding = props.nolanding;
+  const loadingPage = props.loadingPage;
+  const targetLocation = props.targetLocation;
+
+  const [error, setError] = useState(null);
+  const [user, setUser] = useState(null);
+  const [redirectUrl, setRedirectUrl] = useState(null);
+
+  const [attempting, setAttempting] = useState(false);
+  useEffect(() => {
+    const handleCallback = async () => {
+      if (!attempting) {
+        setAttempting(true);
+        try {
+          if (!user) {
+            const { code, state } = getCallbackParams();
+            const resp = await fetch(`${tokenApi}?code=${code}&state=${state}`, { mode: 'cors' });
+            const authResult = await resp.json();
+            await auth.setPersistence(firebase.auth.Auth.Persistence.SESSION);
+            const credential = await auth.signInWithCustomToken(authResult[FIREBASE_CUSTOM_TOKEN]);
+            setUser(credential.user);
+            setRedirectUrl(authResult['redirect_url']);
+          }
+        } catch (err) {
+          setError({ type: SSO_ERROR, error: err });
+          setAttempting(false);
+          if (nolanding) ssoSession.setAttempted(false);
+        }
+      }
+    };
+
+    if (window.location.pathname === callbackPath) {
+      handleCallback();
+    } else if (nolanding) {
+      if (ssoSession.isAttempted()) {
+        auth.onAuthStateChanged(user => {
+          if (user) {
+            setUser(user);
+          }
+        });
+      } else {
+        loginOkta(targetLocation);
+      }
+    } else {
+      auth.onAuthStateChanged(user => {
+        if (user) {
+          setUser(user);
+        }
+      });
+    }
+  });
+
+  const [redirecting, setRedirecting] = useState(false);
+  useEffect(() => {
+    if (redirectUrl && !redirecting) {
+      window.location = redirectUrl;
+      setRedirecting(true);
+    }
+  }, [redirectUrl, redirecting]);
+
+  const loginOkta = targetLocation => {
+    setRedirectUrl(`${oktaLoginUrl}?redirect_uri=${encodeURIComponent(targetLocation || window.location)}`);
+    if (nolanding) ssoSession.setAttempted(true);
+  };
+
+  const loginSNS = sns => {
+    const provider = getSNSProvider(sns);
+    if (nolanding) ssoSession.setAttempted(true);
+    return auth.signInWithRedirect(provider);
+  };
+
+  const loginSMS = (phoneNo, recaptchaContainerId) => {
+    // 'recaptcha-container' is the ID of an element in the DOM.
+    const applicationVerifier = new firebase.auth.RecaptchaVerifier(recaptchaContainerId ? recaptchaContainerId : 'recaptcha-container');
+    const provider = new firebase.auth.PhoneAuthProvider();
+    provider.verifyPhoneNumber(phoneNo, applicationVerifier).then(function (verificationId) {
+      var verificationCode = window.prompt('Please enter the verification code that was sent to your mobile device.');
+      return firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
+    }).then(function (phoneCredential) {
+      return firebase.auth().signInWithCredential(phoneCredential);
+    });
+    if (nolanding) ssoSession.setAttempted(true);
+  };
+
+  const logout = target => auth.signOut().then(() => {
+    setUser(null);
+    setError(null);
+    setRedirectUrl(target || "/");
+    if (nolanding) ssoSession.setAttempted(false);
+  });
+
+  return React.createElement(
+    AuthContext.Provider,
+    { value: { user, error, loginOkta, loginSNS, loginSMS, logout } },
+    !redirectUrl && !attempting && props.children || attempting && loadingPage
+  );
+};
+
+export { AuthContext, AuthProvider };

package/dist/utils/fbProxy.js

@@ -0,0 +1,63 @@
+const localhost = 'localhost';
+const functions_region = 'australia-southeast1';
+
+const getProxiedFirestore = (fb, fs, host, ssl) => {
+    fs = fs || fb.firestore();
+    if (ssl === undefined) ssl = !host.includes(localhost);
+
+    if (!ssl) {
+        let [hostname, port] = host.split(':');
+        if (!port) {
+            port = 5001;
+        } else {
+            port = Number.parseInt(port);
+        }
+        fs.useEmulator(hostname, port);
+        fs.settings({ experimentalForceLongPolling: true });
+    } else {
+        fs.settings({ host, ssl, experimentalForceLongPolling: true });
+    }
+    return fs;
+};
+
+const getProxiedFunctions = (fb, fn, host, ssl) => {
+    fn = fn || fb.functions(functions_region);
+    if (ssl === undefined) ssl = !host.includes(localhost);
+
+    if (!ssl) {
+        let [hostname, port] = host.split(':');
+        if (!port) {
+            port = 5001;
+        } else {
+            port = Number.parseInt(port);
+        }
+        fn.useEmulator(hostname, port);
+    } else {
+        fn.useFunctionsEmulator(`https://${host}`);
+    }
+    return fn;
+};
+
+const getProxiedAuth = (fb, auth, host, ssl) => {
+    auth = auth || fb.auth();
+    if (ssl === undefined) ssl = !host.includes(localhost);
+
+    auth.useEmulator(`${ssl ? 'https' : 'http'}://${host}`);
+    const removeElements = elms => elms.forEach(el => el.remove());
+    // console.debug("[DEBUG] class firebase-emulator-warning: ", document.querySelectorAll(".firebase-emulator-warning"))
+    removeElements(document.querySelectorAll(".firebase-emulator-warning"));
+
+    return auth;
+};
+
+const proxy = fb => {
+    return {
+        firestore: (host, ssl, fs) => getProxiedFirestore(fb, fs, host, ssl),
+        functions: (host, ssl, fn) => getProxiedFunctions(fb, fn, host, ssl),
+        auth: (host, ssl, auth) => getProxiedAuth(fb, auth, host, ssl)
+        // database: () => fb.database(), // No more proxy for RTDB
+        // storage: () => fb.storage(), // TODO
+    };
+};
+
+export { proxy, functions_region };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@monash/portal-auth",
+  "version": "0.0.4",
+  "private": false,
+  "description": "Monash react components",
+  "license": "MIT",
+  "author": "hmonsh",
+  "main": "dist/components/AuthContext.js",
+  "scripts": {
+    "build": "node scripts/script.js",
+    "test": "exit 0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "firebase": "^9.8.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@babel/runtime": "^7.18.3",
+    "@babel/cli": "^7.18.3",
+    "@babel/core": "^7.18.3"
+  }
+}