react-oauth-providers 1.0.0 → 1.1.0

package/src/actions.ts

@@ -1,156 +0,0 @@
-import { getSessionItem } from "./utils/session";
-import {
-  getGoogleSessionUser,
-  signinWithGoogleCallback,
-  refreshGoogleAccessToken,
-} from "./google";
-import { getConfig } from "./authConfig";
-import { AUTH_PROVIDERS } from "./utils/constants";
-import { getFromStorage, removeFromStorage } from "./utils/storage";
-
-export { signinWithGoogleSpa as signinWithGoogleSpa } from "./google";
-
-let refreshTimeout: ReturnType<typeof setTimeout> | null = null;
-
-export const handleCallback = async () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const keys = config?.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;
-
-        await signinWithGoogleCallback(code, verifier);
-        break;
-      }
-
-      default:
-        break;
-    }
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
-export const handleFetchSessionUser = async (retry = true) => {
-  const config = getConfig();
-  if (!config) return;
-
-  const keys = config?.keys;
-
-  const authMode = getFromStorage(config.storage!, keys.PROVIDER);
-  if (!authMode) return;
-
-  let sessionUser = null;
-
-  try {
-    switch (authMode) {
-      case AUTH_PROVIDERS.google: {
-        sessionUser = await 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: {
-        await refreshGoogleAccessToken();
-        await handleFetchSessionUser(false);
-
-        break;
-      }
-
-      default:
-        break;
-    }
-
-    return null;
-  }
-};
-
-const handleScheduleTokenRefresh = () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const keys = config?.keys;
-
-  const authMode = getFromStorage(config.storage!, keys.PROVIDER);
-  if (!authMode) return;
-
-  const expiresIn = Number(
-    getFromStorage(config.storage!, keys.EXPIRES_IN) ?? 0
-  );
-  if (!expiresIn) return;
-
-  clearTokenRefresh();
-
-  // Refresh 60 seconds before expiry
-  const refreshTime = expiresIn - 60 * 1000;
-  refreshTimeout = setTimeout(async () => {
-    switch (authMode) {
-      case AUTH_PROVIDERS.google: {
-        await refreshGoogleAccessToken();
-        break;
-      }
-
-      default:
-        break;
-    }
-  }, refreshTime);
-};
-
-const clearTokenRefresh = () => {
-  if (refreshTimeout) {
-    clearTimeout(refreshTimeout);
-    refreshTimeout = null;
-  }
-};
-
-export const logout = () => {
-  clearTokens();
-  clearTokenRefresh();
-};
-
-const clearTokens = () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const keys = config?.keys;
-
-  const {
-    PROVIDER,
-    ACCESS_TOKEN,
-    EXPIRES_IN,
-    REFRESH_TOKEN,
-    TOKEN_TYPE,
-    ID_TOKEN,
-    PROVIDER_TYPE,
-  } = keys;
-
-  removeFromStorage(config.storage!, PROVIDER);
-  removeFromStorage(config.storage!, PROVIDER_TYPE);
-  removeFromStorage(config.storage!, ACCESS_TOKEN);
-  removeFromStorage(config.storage!, EXPIRES_IN);
-  removeFromStorage(config.storage!, REFRESH_TOKEN);
-  removeFromStorage(config.storage!, TOKEN_TYPE);
-  removeFromStorage(config.storage!, ID_TOKEN);
-};

package/src/authConfig.ts

@@ -1,56 +0,0 @@
-import type { IAuthConfig, IAuthInternalConfig, Keys } from "./types";
-import { toURL, makeKey } from "./utils/others";
-
-export let config: IAuthInternalConfig | null = null;
-
-export const getConfig = () => config;
-
-export function createInternalConfig(
-  passedConfig: IAuthConfig
-): IAuthInternalConfig {
-  // Set default values for internal config object
-  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,
-  }: IAuthConfig = passedConfig;
-
-  config = {
-    ...passedConfig,
-    preLogin,
-    postLogin,
-    onLogInError,
-    storage,
-    storageKeyPrefix,
-    spaCallbackUri,
-    logoutRedirect,
-    keys: createAuthKeys(storageKeyPrefix),
-    googleProvider: googleProvider
-      ? { type: "spa", scope: "openid email profile", ...googleProvider }
-      : undefined,
-  };
-
-  return config;
-}
-
-export function createAuthKeys(prefix?: string): Record<keyof Keys, string> {
-  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),
-  };
-}

package/src/google/index.ts

@@ -1,157 +0,0 @@
-import http from "../utils/http";
-import { removeSessionItem, setSessionItem } from "../utils/session";
-import { generatePkce } from "../utils/pkce";
-import type { IAuthGoogleProviderType } from "../types";
-import { getConfig } from "../authConfig";
-import { AUTH_PROVIDERS } from "../utils/constants";
-import { getFromStorage, keepToStorage } from "../utils/storage";
-
-export const signinWithGoogleSpa = async () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const { googleProvider, keys } = config;
-
-  const { verifier, challenge, algorithm } = await generatePkce();
-
-  setSessionItem(keys.VERIFIER, verifier, 3 * 60 * 1000);
-  setSessionItem(keys.PROVIDER, AUTH_PROVIDERS.google, 3 * 60 * 1000);
-  setSessionItem(keys.PROVIDER_TYPE, googleProvider?.type!, 3 * 60 * 1000);
-
-  const params = new URLSearchParams({
-    client_id: googleProvider?.clientId!,
-    redirect_uri: config?.spaCallbackUri!,
-    response_type: "code",
-    scope: 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()}`;
-};
-
-export const signinWithGoogleCallback = async (
-  code: string,
-  verifier: string
-) => {
-  if (!code || !verifier) return;
-
-  const config = getConfig();
-  if (!config) return;
-
-  const { googleProvider, keys } = config;
-  const type: IAuthGoogleProviderType = "spa";
-
-  try {
-    const data = new URLSearchParams({
-      client_id: googleProvider?.clientId!,
-      grant_type: "authorization_code",
-      code: code,
-      redirect_uri: config?.spaCallbackUri!,
-      code_verifier: verifier,
-    });
-
-    const res = await http.post(
-      "https://oauth2.googleapis.com/token",
-      data.toString(),
-      {
-        headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      }
-    );
-
-    const tokens = res.data as any;
-
-    if (tokens?.access_token) {
-      removeSessionItem(keys.PROVIDER);
-      removeSessionItem(keys.VERIFIER);
-      removeSessionItem(keys.PROVIDER_TYPE);
-
-      keepToStorage(config.storage!, keys.PROVIDER, AUTH_PROVIDERS.google);
-      keepToStorage(config.storage!, keys.PROVIDER_TYPE, type);
-      keepToStorage(config.storage!, keys.ACCESS_TOKEN, tokens.access_token);
-      keepToStorage(
-        config.storage!,
-        keys.EXPIRES_IN,
-        String(Date.now() + tokens.expires_in * 1000)
-      );
-      keepToStorage(config.storage!, keys.REFRESH_TOKEN, tokens.refresh_token);
-      keepToStorage(config.storage!, keys.TOKEN_TYPE, tokens.token_type);
-      keepToStorage(config.storage!, keys.ID_TOKEN, tokens.id_token);
-    }
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};
-
-export const getGoogleSessionUser = async () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const { keys } = config;
-
-  try {
-    const accessToken = getFromStorage(config.storage!, keys.ACCESS_TOKEN);
-    if (!accessToken) return;
-
-    const res = await http.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);
-  }
-};
-
-export const refreshGoogleAccessToken = async () => {
-  const config = getConfig();
-  if (!config) return;
-
-  const { googleProvider, keys } = config;
-
-  const refreshToken = getFromStorage(config.storage!, keys.REFRESH_TOKEN);
-
-  if (!refreshToken) return;
-
-  try {
-    const data = new URLSearchParams({
-      client_id: googleProvider?.clientId!,
-      grant_type: "refresh_token",
-      refresh_token: refreshToken,
-    });
-
-    const res = await http.post(
-      "https://oauth2.googleapis.com/token",
-      data.toString(),
-      {
-        headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      }
-    );
-
-    const tokens = res.data as any;
-
-    if (!tokens.access_token) {
-      console.error("Failed to refresh access token", tokens);
-      return null;
-    }
-
-    keepToStorage(config.storage!, keys.ACCESS_TOKEN, tokens.access_token);
-    if (tokens.expires_in) {
-      keepToStorage(
-        config.storage!,
-        keys.EXPIRES_IN,
-        String(Date.now() + tokens.expires_in * 1000)
-      );
-    }
-    if (tokens.id_token)
-      keepToStorage(config.storage!, keys.ID_TOKEN, tokens.id_token);
-    if (tokens.token_type)
-      keepToStorage(config.storage!, keys.TOKEN_TYPE, tokens.token_type);
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};

package/src/index.ts

@@ -1,5 +0,0 @@
-export { AuthContext } from './AuthContext'
-export { AuthProvider } from './AuthProvider'
-export { useAuth } from './useAuth'
-
-export type { IAuthContext, IAuthProvider, IAuthConfig } from './types'

package/src/types.ts

@@ -1,57 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface IAuthContext {
-  loginInProgress: boolean;
-  signinWithGoogle: () => Promise<void>;
-  logOut: ILogoutFunc;
-  user?: any;
-  error?: string | null;
-}
-
-export interface IAuthProvider {
-  authConfig: IAuthConfig;
-  children: ReactNode;
-}
-
-export type IAuthStorageType = "session" | "local";
-
-export type IAuthGoogleProviderType = "spa";
-
-export interface IAuthGoogleProvider {
-  clientId: string;
-  type?: IAuthGoogleProviderType;
-  scope?: string;
-}
-
-// Input from users of the package, some optional values
-export type IAuthConfig = {
-  googleProvider?: IAuthGoogleProvider;
-  spaCallbackUri?: string;
-  logoutRedirect?: string;
-  preLogin?: () => void;
-  postLogin?: () => void;
-  onLogInError?: (err: any) => void;
-  storageKeyPrefix?: string;
-  storage?: IAuthStorageType;
-
-  error?: string | null;
-};
-
-export type Keys = {
-  PROVIDER_TYPE: string;
-  PROVIDER: string;
-  VERIFIER: string;
-  ACCESS_TOKEN: string;
-  EXPIRES_IN: string;
-  REFRESH_TOKEN: string;
-  TOKEN_TYPE: string;
-  ID_TOKEN: string;
-};
-
-export type IAuthInternalConfig = IAuthConfig & { keys: Keys };
-
-export type ILogoutFunc = (args?: {
-  logoutHint?: string;
-  redirect?: boolean;
-  redirectUri?: string;
-}) => void;

package/src/useAuth.tsx

@@ -1,13 +0,0 @@
-import { useContext } from 'react'
-import { AuthContext } from './AuthContext'
-import type { IAuthContext } from './types'
-
-export function useAuth(): IAuthContext {
-  const ctx = useContext(AuthContext)
-
-  if (!ctx) {
-    throw new Error('useAuth must be used within an AuthProvider')
-  }
-
-  return ctx
-}

package/src/utils/constants.ts

@@ -1 +0,0 @@
-export const AUTH_PROVIDERS = { google: 'google' } as const

package/src/utils/http.ts

@@ -1,51 +0,0 @@
-type RequestOptions = {
-  headers?: Record<string, string>;
-  body?: string;
-};
-
-async function request(
-  url: string,
-  options: RequestOptions & { method: string }
-) {
-  let body: any;
-  const headers: Record<string, string> = { ...(options.headers ?? {}) };
-
-  try {
-    body = options.body;
-    headers["Content-Type"] = headers["Content-Type"] || "application/json";
-
-    const response = await fetch(url, {
-      method: options.method,
-      headers,
-      body,
-    });
-
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({}));
-      const expectedError = response.status >= 400 && response.status < 500;
-
-      if (!expectedError) {
-        console.log({ error });
-        console.log("Unexpected error occurs");
-      }
-
-      return Promise.reject({ status: response.status, ...error });
-    }
-
-    return { data: await response.json() };
-  } catch (error) {
-    console.log("Network or unexpected error:", error);
-    return Promise.reject(error);
-  }
-}
-
-export default {
-  get: (url: string, options?: RequestOptions) =>
-    request(url, { ...options, method: "GET" }),
-  post: (url: string, body?: string, options?: RequestOptions) =>
-    request(url, { ...options, method: "POST", body }),
-  put: (url: string, body?: string, options?: RequestOptions) =>
-    request(url, { ...options, method: "PUT", body }),
-  delete: (url: string, options?: RequestOptions) =>
-    request(url, { ...options, method: "DELETE" }),
-};

package/src/utils/others.ts

@@ -1,13 +0,0 @@
-export const toURL = (input: string): URL => {
-  // If input is absolute, URL works directly
-  try {
-    return new URL(input)
-  } catch {
-    // If input is relative, use window.location.origin as base
-    return new URL(input, window.location.origin)
-  }
-}
-
-export const makeKey = (key: string, prefix?: string) => {
-  return prefix ? `${prefix}_${key}` : key
-}

package/src/utils/pkce.ts

@@ -1,15 +0,0 @@
-import getPkce from "oauth-pkce";
-
-export const generatePkce = async (): Promise<{
-  verifier: string;
-  challenge: string;
-  algorithm: string;
-}> => {
-  return new Promise((resolve, reject) => {
-    getPkce(50, (error, { verifier, challenge }) => {
-      if (error) reject(error);
-
-      resolve({ verifier, challenge, algorithm: "S256" });
-    });
-  });
-};

package/src/utils/session.ts

@@ -1,33 +0,0 @@
-export function setSessionItem(key: string, value: string, ttlMs: number) {
-  const data = {
-    value,
-    expires: Date.now() + ttlMs,
-  }
-
-  sessionStorage.setItem(key, JSON.stringify(data))
-}
-
-export function getSessionItem(key: string): string | null {
-  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 {
-    return null
-  }
-}
-
-export function removeSessionItem(key: string) {
-  try {
-    sessionStorage.removeItem(key)
-  } catch (error) {
-    return null
-  }
-}

package/src/utils/storage.ts

@@ -1,18 +0,0 @@
-import type { IAuthStorageType } from '../types'
-
-export const keepToStorage = (type: IAuthStorageType, key: string, value: string) => {
-  if (type === 'local') localStorage.setItem(key, value)
-  else if (type === 'session') sessionStorage.setItem(key, value)
-}
-
-export const removeFromStorage = (type: IAuthStorageType, key: string) => {
-  if (type === 'local') localStorage.removeItem(key)
-  else if (type === 'session') sessionStorage.removeItem(key)
-}
-
-export const getFromStorage = (type: IAuthStorageType, key: string) => {
-  if (type === 'local') return localStorage.getItem(key) ?? ''
-  else if (type === 'session') return sessionStorage.getItem(key) ?? ''
-
-  return ''
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "module": "ESNext",
-    "declaration": true,
-    "declarationDir": "dist/types",
-    "outDir": "dist",
-    "strict": true,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["src"]
-}