react-oauth-providers 1.0.0

package/README.md

@@ -0,0 +1,118 @@
+# React OAuth Providers
+
+A lightweight React package for OAuth authentication. Currently, only **Google** is supported.
+
+## ⚠️ **Notes**
+
+- This package is designed for **SPA applications**.
+- Google **UWP clients** are supported.
+- Passing a **client secret** from the frontend is **vulnerable** and should be avoided.
+- Configure **spaCallbackUri** correctly to match your route.
+
+---
+
+<br>
+<br>
+
+## 📦 Installation
+
+```bash
+npm install react-oauth-providers@latest
+```
+
+<br>
+<br>
+
+## ⚙️ Setup Google OAuth
+
+Go to [Google Cloud Console](https://console.cloud.google.com/) and create a new app.
+
+Create an OAuth client and set **Application type** as **Universal Windows Platform (UWP)**.
+
+<br>
+<br>
+
+## 🚀 Quick Start
+
+```js
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { AuthProvider, type IAuthConfig } from 'react-oauth-providers'
+import App from './App'
+
+const authConfig: IAuthConfig = {
+  googleProvider: {
+    clientId: process.env.GOOGLE_CLIENT_ID,
+  },
+  storage: 'session', // 'session' | 'local'
+  spaCallbackUri: `${window.location.origin}/auth/callback`,
+  preLogin: () => console.log('Before login...'),
+  postLogin: async () => {
+    console.log('After login...')
+    window.location.href = window.location.origin
+  },
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AuthProvider authConfig={authConfig}>
+      <App />
+    </AuthProvider>
+  </StrictMode>
+)
+```
+
+<br>
+<br>
+
+## 🔑 Using Authentication in Components
+
+```js
+import { useAuth } from "@/providers/Auth";
+
+export default function Login() {
+  const { loginInProgress, user, logOut, signinWithGoogle } = useAuth();
+
+  return (
+    <div>
+      {user ? (
+        <>
+          <p>Welcome, {user.name}</p>
+          <button onClick={logOut}>Logout</button>
+        </>
+      ) : (
+        <button
+          onClick={async () => await signinWithGoogle()}
+          disabled={loginInProgress}
+        >
+          {loginInProgress ? "Signing in..." : "Sign in with Google"}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+<br>
+<br>
+
+## ✅ Features
+
+- **Google OAuth** (no backend secret required)
+- **Session or Local storage** support
+- **preLogin** & **postLogin** hooks for custom logic
+- **Automatic token management**: token storage, decoding, and refresh are fully handled by the package
+- Fully **React hooks-based** API (useAuth)
+
+<br>
+
+## 🧩 AuthProvider Props
+
+| Prop           | Type                                   | Description                                               |
+| -------------- | -------------------------------------- | --------------------------------------------------------- |
+| googleProvider | `{ clientId: string, scope?: string }` | Your Google OAuth client configuration                    |
+| storage        | `"session" \| "local"`                 | Storage type for session or local storage                 |
+| spaCallbackUri | `string`                               | SPA callback URL for OAuth redirects                      |
+| preLogin       | `() => void`                           | Function called before login starts                       |
+| postLogin      | `() => void \| Promise<void>`          | Function called after login completes                     |
+| onLogInError   | `(error) => void`                      | Function called when an error occurs in the login process |

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-oauth-providers",
+  "version": "1.0.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --out-dir dist",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "oauth-pkce": "^0.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "oauth-providers",
+    "react-oauth-providers",
+    "google-oauth-provider"
+  ],
+  "author": "Asif Sorowar"
+}

package/src/AuthContext.tsx

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

package/src/AuthProvider.tsx

@@ -0,0 +1,103 @@
+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>
+  );
+};

package/src/actions.ts

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,157 @@
+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

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

package/src/types.ts

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,13 @@
+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

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

package/src/utils/http.ts

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,18 @@
+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

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