react-oauth-providers 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -0,0 +1,565 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/AuthContext.tsx
+import { createContext } from "react";
+var AuthContext = createContext({});
+
+// src/AuthProvider.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+// src/utils/session.ts
+function setSessionItem(key, value, ttlMs) {
+  const data = {
+    value,
+    expires: Date.now() + ttlMs
+  };
+  sessionStorage.setItem(key, JSON.stringify(data));
+}
+function getSessionItem(key) {
+  const dataStr = sessionStorage.getItem(key);
+  if (!dataStr)
+    return null;
+  try {
+    const data = JSON.parse(dataStr);
+    if (Date.now() > data.expires) {
+      sessionStorage.removeItem(key);
+      return null;
+    }
+    return data.value;
+  } catch (e) {
+    return null;
+  }
+}
+function removeSessionItem(key) {
+  try {
+    sessionStorage.removeItem(key);
+  } catch (error) {
+    return null;
+  }
+}
+
+// src/utils/http.ts
+function request(url, options) {
+  return __async(this, null, function* () {
+    var _a;
+    let body;
+    const headers = __spreadValues({}, (_a = options.headers) != null ? _a : {});
+    try {
+      body = options.body;
+      headers["Content-Type"] = headers["Content-Type"] || "application/json";
+      const response = yield fetch(url, {
+        method: options.method,
+        headers,
+        body
+      });
+      if (!response.ok) {
+        const error = yield response.json().catch(() => ({}));
+        const expectedError = response.status >= 400 && response.status < 500;
+        if (!expectedError) {
+          console.log({ error });
+          console.log("Unexpected error occurs");
+        }
+        return Promise.reject(__spreadValues({ status: response.status }, error));
+      }
+      return { data: yield response.json() };
+    } catch (error) {
+      console.log("Network or unexpected error:", error);
+      return Promise.reject(error);
+    }
+  });
+}
+var http_default = {
+  get: (url, options) => request(url, __spreadProps(__spreadValues({}, options), { method: "GET" })),
+  post: (url, body, options) => request(url, __spreadProps(__spreadValues({}, options), { method: "POST", body })),
+  put: (url, body, options) => request(url, __spreadProps(__spreadValues({}, options), { method: "PUT", body })),
+  delete: (url, options) => request(url, __spreadProps(__spreadValues({}, options), { method: "DELETE" }))
+};
+
+// src/utils/pkce.ts
+var generatePkce = () => __async(void 0, null, function* () {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  const verifier = base64UrlEncode(array);
+  const buffer = new TextEncoder().encode(verifier);
+  const digest = yield crypto.subtle.digest("SHA-256", buffer);
+  const challenge = base64UrlEncode(new Uint8Array(digest));
+  return {
+    verifier,
+    challenge,
+    algorithm: "S256"
+  };
+});
+var base64UrlEncode = (array) => {
+  let str = "";
+  const chunkSize = 32768;
+  for (let i = 0; i < array.length; i += chunkSize) {
+    const chunk = array.subarray(i, i + chunkSize);
+    str += String.fromCharCode.apply(null, Array.from(chunk));
+  }
+  return btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+};
+
+// src/utils/others.ts
+var toURL = (input) => {
+  try {
+    return new URL(input);
+  } catch (e) {
+    return new URL(input, window.location.origin);
+  }
+};
+var makeKey = (key, prefix) => {
+  return prefix ? `${prefix}_${key}` : key;
+};
+
+// src/authConfig.ts
+var config = null;
+var getConfig = () => config;
+function createInternalConfig(passedConfig) {
+  const {
+    preLogin = () => null,
+    postLogin = () => null,
+    onLogInError = () => null,
+    storage = "local",
+    spaCallbackUri = passedConfig.spaCallbackUri ? toURL(passedConfig.spaCallbackUri).toString() : window.location.origin,
+    logoutRedirect = passedConfig.logoutRedirect ? toURL(passedConfig.logoutRedirect).toString() : window.location.origin,
+    storageKeyPrefix = "auth_",
+    googleProvider
+  } = passedConfig;
+  config = __spreadProps(__spreadValues({}, passedConfig), {
+    preLogin,
+    postLogin,
+    onLogInError,
+    storage,
+    storageKeyPrefix,
+    spaCallbackUri,
+    logoutRedirect,
+    keys: createAuthKeys(storageKeyPrefix),
+    googleProvider: googleProvider ? __spreadValues({ type: "spa", scope: "openid email profile" }, googleProvider) : void 0
+  });
+  return config;
+}
+function createAuthKeys(prefix) {
+  return {
+    PROVIDER_TYPE: makeKey("provider_type", prefix),
+    PROVIDER: makeKey("provider", prefix),
+    VERIFIER: makeKey("verifier", prefix),
+    ACCESS_TOKEN: makeKey("access_token", prefix),
+    EXPIRES_IN: makeKey("expires_in", prefix),
+    REFRESH_TOKEN: makeKey("refresh_token", prefix),
+    TOKEN_TYPE: makeKey("token_type", prefix),
+    ID_TOKEN: makeKey("id_token", prefix)
+  };
+}
+
+// src/utils/constants.ts
+var AUTH_PROVIDERS = { google: "google" };
+
+// src/utils/storage.ts
+var keepToStorage = (type, key, value) => {
+  if (type === "local")
+    localStorage.setItem(key, value);
+  else if (type === "session")
+    sessionStorage.setItem(key, value);
+};
+var removeFromStorage = (type, key) => {
+  if (type === "local")
+    localStorage.removeItem(key);
+  else if (type === "session")
+    sessionStorage.removeItem(key);
+};
+var getFromStorage = (type, key) => {
+  var _a, _b;
+  if (type === "local")
+    return (_a = localStorage.getItem(key)) != null ? _a : "";
+  else if (type === "session")
+    return (_b = sessionStorage.getItem(key)) != null ? _b : "";
+  return "";
+};
+
+// src/google/index.ts
+var signinWithGoogleSpa = () => __async(void 0, null, function* () {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const { googleProvider, keys } = config2;
+  const { verifier, challenge, algorithm } = yield generatePkce();
+  setSessionItem(keys.VERIFIER, verifier, 3 * 60 * 1e3);
+  setSessionItem(keys.PROVIDER, AUTH_PROVIDERS.google, 3 * 60 * 1e3);
+  setSessionItem(keys.PROVIDER_TYPE, googleProvider == null ? void 0 : googleProvider.type, 3 * 60 * 1e3);
+  const params = new URLSearchParams({
+    client_id: googleProvider == null ? void 0 : googleProvider.clientId,
+    redirect_uri: config2 == null ? void 0 : config2.spaCallbackUri,
+    response_type: "code",
+    scope: (googleProvider == null ? void 0 : googleProvider.scope) || "",
+    code_challenge: challenge,
+    code_challenge_method: algorithm,
+    access_type: "offline",
+    prompt: "consent"
+  });
+  window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
+});
+var signinWithGoogleCallback = (code, verifier) => __async(void 0, null, function* () {
+  if (!code || !verifier)
+    return;
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const { googleProvider, keys } = config2;
+  const type = "spa";
+  try {
+    const data = new URLSearchParams({
+      client_id: googleProvider == null ? void 0 : googleProvider.clientId,
+      grant_type: "authorization_code",
+      code,
+      redirect_uri: config2 == null ? void 0 : config2.spaCallbackUri,
+      code_verifier: verifier
+    });
+    const res = yield http_default.post(
+      "https://oauth2.googleapis.com/token",
+      data.toString(),
+      {
+        headers: { "Content-Type": "application/x-www-form-urlencoded" }
+      }
+    );
+    const tokens = res.data;
+    if (tokens == null ? void 0 : tokens.access_token) {
+      removeSessionItem(keys.PROVIDER);
+      removeSessionItem(keys.VERIFIER);
+      removeSessionItem(keys.PROVIDER_TYPE);
+      keepToStorage(config2.storage, keys.PROVIDER, AUTH_PROVIDERS.google);
+      keepToStorage(config2.storage, keys.PROVIDER_TYPE, type);
+      keepToStorage(config2.storage, keys.ACCESS_TOKEN, tokens.access_token);
+      keepToStorage(
+        config2.storage,
+        keys.EXPIRES_IN,
+        String(Date.now() + tokens.expires_in * 1e3)
+      );
+      keepToStorage(config2.storage, keys.REFRESH_TOKEN, tokens.refresh_token);
+      keepToStorage(config2.storage, keys.TOKEN_TYPE, tokens.token_type);
+      keepToStorage(config2.storage, keys.ID_TOKEN, tokens.id_token);
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+});
+var getGoogleSessionUser = () => __async(void 0, null, function* () {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const { keys } = config2;
+  try {
+    const accessToken = getFromStorage(config2.storage, keys.ACCESS_TOKEN);
+    if (!accessToken)
+      return;
+    const res = yield http_default.get(
+      `https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=${accessToken}`
+    );
+    const user = res.data;
+    return user;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+});
+var refreshGoogleAccessToken = () => __async(void 0, null, function* () {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const { googleProvider, keys } = config2;
+  const refreshToken = getFromStorage(config2.storage, keys.REFRESH_TOKEN);
+  if (!refreshToken)
+    return;
+  try {
+    const data = new URLSearchParams({
+      client_id: googleProvider == null ? void 0 : googleProvider.clientId,
+      grant_type: "refresh_token",
+      refresh_token: refreshToken
+    });
+    const res = yield http_default.post(
+      "https://oauth2.googleapis.com/token",
+      data.toString(),
+      {
+        headers: { "Content-Type": "application/x-www-form-urlencoded" }
+      }
+    );
+    const tokens = res.data;
+    if (!tokens.access_token) {
+      console.error("Failed to refresh access token", tokens);
+      return null;
+    }
+    keepToStorage(config2.storage, keys.ACCESS_TOKEN, tokens.access_token);
+    if (tokens.expires_in) {
+      keepToStorage(
+        config2.storage,
+        keys.EXPIRES_IN,
+        String(Date.now() + tokens.expires_in * 1e3)
+      );
+    }
+    if (tokens.id_token)
+      keepToStorage(config2.storage, keys.ID_TOKEN, tokens.id_token);
+    if (tokens.token_type)
+      keepToStorage(config2.storage, keys.TOKEN_TYPE, tokens.token_type);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+});
+
+// src/actions.ts
+var refreshTimeout = null;
+var handleCallback = () => __async(void 0, null, function* () {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const keys = config2 == null ? void 0 : config2.keys;
+  const authMode = getSessionItem(keys.PROVIDER);
+  const verifier = getSessionItem(keys.VERIFIER);
+  if (!authMode || !verifier)
+    return;
+  try {
+    switch (authMode) {
+      case AUTH_PROVIDERS.google: {
+        const searchQuery = new URLSearchParams(window.location.search);
+        const code = searchQuery.get("code");
+        if (!code)
+          return;
+        yield signinWithGoogleCallback(code, verifier);
+        break;
+      }
+      default:
+        break;
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+});
+var handleFetchSessionUser = (retry = true) => __async(void 0, null, function* () {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const keys = config2 == null ? void 0 : config2.keys;
+  const authMode = getFromStorage(config2.storage, keys.PROVIDER);
+  if (!authMode)
+    return;
+  let sessionUser = null;
+  try {
+    switch (authMode) {
+      case AUTH_PROVIDERS.google: {
+        sessionUser = yield getGoogleSessionUser();
+        break;
+      }
+      default:
+        break;
+    }
+    if (sessionUser)
+      handleScheduleTokenRefresh();
+    return sessionUser;
+  } catch (error) {
+    console.log("Fetch Session User Error:", error);
+    if (!retry)
+      return null;
+    switch (authMode) {
+      case AUTH_PROVIDERS.google: {
+        yield refreshGoogleAccessToken();
+        yield handleFetchSessionUser(false);
+        break;
+      }
+      default:
+        break;
+    }
+    return null;
+  }
+});
+var handleScheduleTokenRefresh = () => {
+  var _a;
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const keys = config2 == null ? void 0 : config2.keys;
+  const authMode = getFromStorage(config2.storage, keys.PROVIDER);
+  if (!authMode)
+    return;
+  const expiresIn = Number(
+    (_a = getFromStorage(config2.storage, keys.EXPIRES_IN)) != null ? _a : 0
+  );
+  if (!expiresIn)
+    return;
+  clearTokenRefresh();
+  const refreshTime = expiresIn - 60 * 1e3;
+  refreshTimeout = setTimeout(() => __async(void 0, null, function* () {
+    switch (authMode) {
+      case AUTH_PROVIDERS.google: {
+        yield refreshGoogleAccessToken();
+        break;
+      }
+      default:
+        break;
+    }
+  }), refreshTime);
+};
+var clearTokenRefresh = () => {
+  if (refreshTimeout) {
+    clearTimeout(refreshTimeout);
+    refreshTimeout = null;
+  }
+};
+var logout = () => {
+  clearTokens();
+  clearTokenRefresh();
+};
+var clearTokens = () => {
+  const config2 = getConfig();
+  if (!config2)
+    return;
+  const keys = config2 == null ? void 0 : config2.keys;
+  const {
+    PROVIDER,
+    ACCESS_TOKEN,
+    EXPIRES_IN,
+    REFRESH_TOKEN,
+    TOKEN_TYPE,
+    ID_TOKEN,
+    PROVIDER_TYPE
+  } = keys;
+  removeFromStorage(config2.storage, PROVIDER);
+  removeFromStorage(config2.storage, PROVIDER_TYPE);
+  removeFromStorage(config2.storage, ACCESS_TOKEN);
+  removeFromStorage(config2.storage, EXPIRES_IN);
+  removeFromStorage(config2.storage, REFRESH_TOKEN);
+  removeFromStorage(config2.storage, TOKEN_TYPE);
+  removeFromStorage(config2.storage, ID_TOKEN);
+};
+
+// src/AuthProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var AuthProvider = ({
+  authConfig,
+  children
+}) => {
+  const config2 = useMemo(
+    () => createInternalConfig(authConfig),
+    [authConfig]
+  );
+  const tmpAuthProviderType = useMemo(
+    () => getSessionItem(config2.keys.PROVIDER_TYPE),
+    [config2]
+  );
+  const [loginInProgress, setLoginInProgress] = useState(true);
+  const [user, setUser] = useState();
+  useEffect(() => {
+    handleFetchSessionUser().then((user2) => {
+      setUser(user2);
+      setLoginInProgress(false);
+    });
+  }, []);
+  const signinWithGoogle = useCallback(() => __async(void 0, null, function* () {
+    var _a, _b, _c;
+    if (!((_a = config2.googleProvider) == null ? void 0 : _a.clientId)) {
+      throw Error(
+        "'clientId' must be set in the 'googleProvider' object in the AuthProvider Config"
+      );
+    }
+    (_b = config2.preLogin) == null ? void 0 : _b.call(config2);
+    try {
+      if (config2.googleProvider.type === "spa") {
+        yield signinWithGoogleSpa();
+      }
+    } catch (error) {
+      (_c = config2.onLogInError) == null ? void 0 : _c.call(config2, error);
+    }
+  }), []);
+  useEffect(() => {
+    if (!config2 || !tmpAuthProviderType)
+      return;
+    if (window.location.pathname !== new URL(config2.spaCallbackUri).pathname) {
+      return;
+    }
+    const callback = () => __async(void 0, null, function* () {
+      var _a, _b;
+      try {
+        yield handleCallback();
+        (_a = config2.postLogin) == null ? void 0 : _a.call(config2);
+      } catch (error) {
+        (_b = config2.onLogInError) == null ? void 0 : _b.call(config2, error);
+      }
+    });
+    callback();
+  }, [tmpAuthProviderType, config2]);
+  const logOut = useCallback(
+    ({ logoutHint, redirect = true, redirectUri } = {}) => {
+      logout();
+      if (!redirect)
+        return;
+      const baseUrl = redirectUri || config2.logoutRedirect || "/";
+      const params = new URLSearchParams();
+      if (logoutHint)
+        params.append("logout_hint", logoutHint);
+      const url = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
+      window.location.assign(url);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    AuthContext.Provider,
+    {
+      value: {
+        loginInProgress,
+        signinWithGoogle,
+        user,
+        logOut
+      },
+      children
+    }
+  );
+};
+
+// src/useAuth.tsx
+import { useContext } from "react";
+function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return ctx;
+}
+export {
+  AuthContext,
+  AuthProvider,
+  useAuth
+};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "react-oauth-providers",
-  "version": "1.0.0",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/types/index.d.ts",
+  "version": "1.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.tsx --format cjs,esm --dts --out-dir dist",
+    "build": "tsup",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "dependencies": {
-    "oauth-pkce": "^0.0.7"
-  },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

package/src/AuthContext.tsx

@@ -1,4 +0,0 @@
-import { createContext } from 'react'
-import type { IAuthContext } from './types'
-
-export const AuthContext = createContext({} as IAuthContext)

package/src/AuthProvider.tsx

@@ -1,103 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { AuthContext } from "./AuthContext";
-import * as actions from "./actions";
-import type { IAuthProvider, ILogoutFunc, IAuthInternalConfig } from "./types";
-import { createInternalConfig } from "./authConfig";
-import { getSessionItem } from "./utils/session";
-
-export const AuthProvider: React.FC<IAuthProvider> = ({
-  authConfig,
-  children,
-}) => {
-  const config = useMemo<IAuthInternalConfig>(
-    () => createInternalConfig(authConfig),
-    [authConfig]
-  );
-  const tmpAuthProviderType = useMemo(
-    () => getSessionItem(config.keys.PROVIDER_TYPE),
-    [config]
-  );
-
-  const [loginInProgress, setLoginInProgress] = useState(true);
-  const [user, setUser] = useState<null | any>();
-
-  useEffect(() => {
-    actions.handleFetchSessionUser().then((user) => {
-      setUser(user);
-      setLoginInProgress(false);
-    });
-  }, []);
-
-  const signinWithGoogle = useCallback(async () => {
-    if (!config.googleProvider?.clientId) {
-      throw Error(
-        "'clientId' must be set in the 'googleProvider' object in the AuthProvider Config"
-      );
-    }
-
-    config.preLogin?.();
-
-    try {
-      if (config.googleProvider.type === "spa") {
-        await actions.signinWithGoogleSpa();
-      }
-    } catch (error) {
-      config.onLogInError?.(error);
-    }
-  }, []);
-
-  // callback handler for spa login
-  useEffect(() => {
-    if (!config || !tmpAuthProviderType) return;
-    if (window.location.pathname !== new URL(config.spaCallbackUri!).pathname) {
-      return;
-    }
-
-    const callback = async () => {
-      try {
-        await actions.handleCallback();
-
-        config.postLogin?.();
-      } catch (error) {
-        config.onLogInError?.(error);
-      }
-    };
-
-    callback();
-  }, [tmpAuthProviderType, config]);
-
-  const logOut = useCallback<ILogoutFunc>(
-    ({ logoutHint, redirect = true, redirectUri } = {}) => {
-      actions.logout();
-
-      if (!redirect) return;
-
-      // Determine redirect URL or fallback to root
-      const baseUrl = redirectUri || config.logoutRedirect || "/";
-
-      const params = new URLSearchParams();
-      if (logoutHint) params.append("logout_hint", logoutHint);
-
-      // Append params only if there are any
-      const url = params.toString()
-        ? `${baseUrl}?${params.toString()}`
-        : baseUrl;
-
-      window.location.assign(url);
-    },
-    []
-  );
-
-  return (
-    <AuthContext.Provider
-      value={{
-        loginInProgress,
-        signinWithGoogle,
-        user,
-        logOut,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};