react-oauth-providers 1.0.0 → 1.1.0

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+
+interface IAuthContext {
+    loginInProgress: boolean;
+    signinWithGoogle: () => Promise<void>;
+    logOut: ILogoutFunc;
+    user?: any;
+    error?: string | null;
+}
+interface IAuthProvider {
+    authConfig: IAuthConfig;
+    children: ReactNode;
+}
+type IAuthStorageType = "session" | "local";
+type IAuthGoogleProviderType = "spa";
+interface IAuthGoogleProvider {
+    clientId: string;
+    type?: IAuthGoogleProviderType;
+    scope?: string;
+}
+type IAuthConfig = {
+    googleProvider?: IAuthGoogleProvider;
+    spaCallbackUri?: string;
+    logoutRedirect?: string;
+    preLogin?: () => void;
+    postLogin?: () => void;
+    onLogInError?: (err: any) => void;
+    storageKeyPrefix?: string;
+    storage?: IAuthStorageType;
+    error?: string | null;
+};
+type ILogoutFunc = (args?: {
+    logoutHint?: string;
+    redirect?: boolean;
+    redirectUri?: string;
+}) => void;
+
+declare const AuthContext: react.Context<IAuthContext>;
+
+declare const AuthProvider: react__default.FC<IAuthProvider>;
+
+declare function useAuth(): IAuthContext;
+
+export { AuthContext, AuthProvider, IAuthConfig, IAuthContext, IAuthProvider, useAuth };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+
+interface IAuthContext {
+    loginInProgress: boolean;
+    signinWithGoogle: () => Promise<void>;
+    logOut: ILogoutFunc;
+    user?: any;
+    error?: string | null;
+}
+interface IAuthProvider {
+    authConfig: IAuthConfig;
+    children: ReactNode;
+}
+type IAuthStorageType = "session" | "local";
+type IAuthGoogleProviderType = "spa";
+interface IAuthGoogleProvider {
+    clientId: string;
+    type?: IAuthGoogleProviderType;
+    scope?: string;
+}
+type IAuthConfig = {
+    googleProvider?: IAuthGoogleProvider;
+    spaCallbackUri?: string;
+    logoutRedirect?: string;
+    preLogin?: () => void;
+    postLogin?: () => void;
+    onLogInError?: (err: any) => void;
+    storageKeyPrefix?: string;
+    storage?: IAuthStorageType;
+    error?: string | null;
+};
+type ILogoutFunc = (args?: {
+    logoutHint?: string;
+    redirect?: boolean;
+    redirectUri?: string;
+}) => void;
+
+declare const AuthContext: react.Context<IAuthContext>;
+
+declare const AuthProvider: react__default.FC<IAuthProvider>;
+
+declare function useAuth(): IAuthContext;
+
+export { AuthContext, AuthProvider, IAuthConfig, IAuthContext, IAuthProvider, useAuth };

package/dist/index.js

@@ -0,0 +1,591 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AuthContext: () => AuthContext,
+  AuthProvider: () => AuthProvider,
+  useAuth: () => useAuth
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/AuthContext.tsx
+var import_react = require("react");
+var AuthContext = (0, import_react.createContext)({});
+
+// src/AuthProvider.tsx
+var import_react2 = require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthProvider = ({
+  authConfig,
+  children
+}) => {
+  const config2 = (0, import_react2.useMemo)(
+    () => createInternalConfig(authConfig),
+    [authConfig]
+  );
+  const tmpAuthProviderType = (0, import_react2.useMemo)(
+    () => getSessionItem(config2.keys.PROVIDER_TYPE),
+    [config2]
+  );
+  const [loginInProgress, setLoginInProgress] = (0, import_react2.useState)(true);
+  const [user, setUser] = (0, import_react2.useState)();
+  (0, import_react2.useEffect)(() => {
+    handleFetchSessionUser().then((user2) => {
+      setUser(user2);
+      setLoginInProgress(false);
+    });
+  }, []);
+  const signinWithGoogle = (0, import_react2.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);
+    }
+  }), []);
+  (0, import_react2.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 = (0, import_react2.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__ */ (0, import_jsx_runtime.jsx)(
+    AuthContext.Provider,
+    {
+      value: {
+        loginInProgress,
+        signinWithGoogle,
+        user,
+        logOut
+      },
+      children
+    }
+  );
+};
+
+// src/useAuth.tsx
+var import_react3 = require("react");
+function useAuth() {
+  const ctx = (0, import_react3.useContext)(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return ctx;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthContext,
+  AuthProvider,
+  useAuth
+});