chore: run pre-commit

Author: soofstad

README.md

@@ -31,7 +31,7 @@ Long version;
 ## Example
 
 ```tsx
-import {AuthContext, AuthProvider, TAuthConfig, TRefreshTokenExpiredEvent} from "react-oauth2-code-pkce"
+import { AuthContext, AuthProvider, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce"
 
 const authConfig: TAuthConfig = {
   clientId: 'myClientID',
@@ -43,20 +43,20 @@ const authConfig: TAuthConfig = {
 }
 
 const UserInfo = (): JSX.Element => {
-  const {token, tokenData} = useContext<IAuthContext>(AuthContext)
-
-  return <>
-    <h4>Access Token</h4>
-    <pre>{token}</pre>
-    <h4>User Information from JWT</h4>
-    <pre>{JSON.stringify(tokenData, null, 2)}</pre>
-  </>
+    const {token, tokenData} = useContext<IAuthContext>(AuthContext)
+
+    return <>
+        <h4>Access Token</h4>
+        <pre>{token}</pre>
+        <h4>User Information from JWT</h4>
+        <pre>{JSON.stringify(tokenData, null, 2)}</pre>
+    </>
 }
 
 ReactDOM.render(<AuthProvider authConfig={authConfig}>
-    <UserInfo/>
-  </AuthProvider>
-  , document.getElementById('root'),
+        <UserInfo/>
+    </AuthProvider>
+    , document.getElementById('root'),
 )
 ```
 
@@ -131,7 +131,7 @@ type TAuthConfig = {
   // Which URL the auth provider should redirect the user to after successful authentication/login
   redirectUri: string  // Required
   // Which scopes to request for the auth token
-  scope?: string  // Default: ''
+  scope?: string  // default: ''
   // Optional state value. Will often make more sense to provide the state in a call to the 'logIn()' function
   state?: string // default: null
   // Which URL to call for logging out of the auth provider
@@ -146,7 +146,7 @@ type TAuthConfig = {
   postLogin?: () => void  // default: () => null
   // Which method to use for login. Can be 'redirect', 'replace', or 'popup'
   // Note that most browsers block popups by default. The library will print a warning and fallback to redirect if the popup is blocked
-  loginMethod: 'redirect' | 'replace' | 'popup' | 'native'  // Default: 'redirect'
+  loginMethod: 'redirect' | 'replace' | 'popup' | 'native'  // default: 'redirect'
   // Optional callback function for the native login method. If loginMethod is set to 'native', this function,
   // which become required, will be called with the URL to open in the native browser(browser in app or somewhere else).
   // This is used to open the native login flow on mobile devices.
@@ -159,7 +159,7 @@ type TAuthConfig = {
   decodeToken?: boolean  // default: true
   // By default, the package will automatically redirect the user to the login server if not already logged in.
   // If set to false, you need to call the "logIn()" function to log in (e.g. with a "Log in" button)
-  autoLogin?: boolean  // Default: true
+  autoLogin?: boolean  // default: true
   // Store login state in 'localStorage' or 'sessionStorage'
   // If set to 'session', no login state is persisted by 'react-oauth2-code-pkce` when the browser closes.
   // NOTE: Many authentication servers will keep the client logged in by cookies. You should therefore use
@@ -186,7 +186,7 @@ type TAuthConfig = {
   // - 'absolute': The refresh token's expiration time is fixed from its initial issuance and does not change, regardless of how many times it is used.
   refreshTokenExpiryStrategy?: 'renewable' | 'absolute' // default: renewable
   // Whether or not to post 'scope' when refreshing the access token
-  refreshWithScope?: boolean // Default: true
+  refreshWithScope?: boolean // default: true
   // Controls whether browser credentials (cookies, TLS client certificates, or authentication headers containing a username and password) are sent when requesting tokens.
   // Warning: Including browser credentials deviates from the standard protocol and can introduce unforeseen security issues. Only set this to 'include' if you know what
   // you are doing and CSRF protection is present. Setting this to 'include' is required when the token endpoint requires client certificate authentication, but likely is
@@ -220,20 +220,20 @@ This can be solved by marking the module with `use client` and importing the com
 'use client'
 import {useContext} from "react";
 import dynamic from 'next/dynamic'
-import {TAuthConfig, TRefreshTokenExpiredEvent, AuthContext} from 'react-oauth2-code-pkce'
+import {TAuthConfig,TRefreshTokenExpiredEvent, AuthContext} from 'react-oauth2-code-pkce'
 
 const AuthProvider = dynamic(
-  () => import("react-oauth2-code-pkce")
-    .then((mod) => mod.AuthProvider),
-  {ssr: false}
+    ()=> import("react-oauth2-code-pkce")
+        .then((mod) => mod.AuthProvider),
+    {ssr: false}
 )
 
 const authConfig: TAuthConfig = {...for you to fill inn}
 
 export default function Authenticated() {
-  (<AuthProvider authConfig={authConfig}>
-    <LoginInfo/>
-  </AuthProvider>)
+    (<AuthProvider authConfig={authConfig}>
+        <LoginInfo/>
+    </AuthProvider>)
 }
 ```
 

examples/react-capacitor-app/app/capacitor.config.ts

@@ -1,9 +1,9 @@
-import type { CapacitorConfig } from '@capacitor/cli';
+import type { CapacitorConfig } from '@capacitor/cli'
 
 const config: CapacitorConfig = {
   appId: 'com.example.app',
   appName: 'react-capacitor-app',
-  webDir: 'dist'
-};
+  webDir: 'dist',
+}
 
-export default config;
+export default config

examples/react-capacitor-app/app/eslint.config.js

@@ -1,9 +1,9 @@
 import js from '@eslint/js'
-import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
 import { globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 export default tseslint.config([
   globalIgnores(['dist']),

examples/react-capacitor-app/app/src/App.tsx

@@ -1,10 +1,10 @@
 import { useContext, useEffect } from 'react'
-import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import reactLogo from './assets/react.svg'
 import './App.css'
-import { AuthContext } from 'react-oauth2-code-pkce'
-import { Capacitor } from '@capacitor/core'
 import { App as CapacitorApp } from '@capacitor/app'
+import { Capacitor } from '@capacitor/core'
+import { AuthContext } from 'react-oauth2-code-pkce'
 
 function App() {
   const { tokenData, token, logOut, idToken, error, logIn } = useContext(AuthContext)
@@ -33,21 +33,19 @@ function App() {
     return (
       <>
         <div>
-          <a href="https://vite.dev" target="_blank">
-            <img src={viteLogo} className="logo" alt="Vite logo" />
+          <a href='https://vite.dev' target='_blank' rel='noreferrer'>
+            <img src={viteLogo} className='logo' alt='Vite logo' />
           </a>
-          <a href="https://react.dev" target="_blank">
-            <img src={reactLogo} className="logo react" alt="React logo" />
+          <a href='https://react.dev' target='_blank' rel='noreferrer'>
+            <img src={reactLogo} className='logo react' alt='React logo' />
           </a>
         </div>
         <h1>Vite + React + OAuth2</h1>
-        <div className="card">
+        <div className='card'>
           <div style={{ color: '#ff6b6b', marginBottom: '1rem' }}>
             An error occurred during authentication: {error}
           </div>
-          <button onClick={() => logOut()}>
-            Log out
-          </button>
+          <button onClick={() => logOut()}>Log out</button>
         </div>
       </>
     )
@@ -56,48 +54,44 @@ function App() {
   return (
     <>
       <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+        <a href='https://vite.dev' target='_blank' rel='noreferrer'>
+          <img src={viteLogo} className='logo' alt='Vite logo' />
         </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a href='https://react.dev' target='_blank' rel='noreferrer'>
+          <img src={reactLogo} className='logo react' alt='React logo' />
         </a>
       </div>
 
       <h1>
         Vite + React + OAuth2
         {Capacitor.isNativePlatform() && (
-          <span style={{
-            fontSize: '0.6em',
-            color: '#61dafb',
-            display: 'block',
-            marginTop: '0.5rem'
-          }}>
+          <span
+            style={{
+              fontSize: '0.6em',
+              color: '#61dafb',
+              display: 'block',
+              marginTop: '0.5rem',
+            }}
+          >
             📱 Native App ({Capacitor.getPlatform()})
           </span>
         )}
       </h1>
 
-      <div className="card">
+      <div className='card'>
         {token ? (
           // Authenticated state
           <>
-            <p style={{ fontSize: '1.2rem', color: '#61dafb' }}>
-              Welcome, you are connected! 🎉
-            </p>
+            <p style={{ fontSize: '1.2rem', color: '#61dafb' }}>Welcome, you are connected! 🎉</p>
 
-            <button onClick={() => logOut()}>
-              Log out
-            </button>
+            <button onClick={() => logOut()}>Log out</button>
 
             <p>
               Edit <code>src/App.tsx</code> and save to test HMR
             </p>
 
             <details style={{ marginTop: '1rem' }}>
-              <summary style={{ cursor: 'pointer', color: '#888' }}>
-                Show authentication token
-              </summary>
+              <summary style={{ cursor: 'pointer', color: '#888' }}>Show authentication token</summary>
               <pre
                 style={{
                   maxWidth: '400px',
@@ -109,7 +103,7 @@ function App() {
                   wordBreak: 'break-all',
                   whiteSpace: 'pre-wrap',
                   fontSize: '0.8rem',
-                  overflow: 'auto'
+                  overflow: 'auto',
                 }}
               >
                 {token}
@@ -119,30 +113,27 @@ function App() {
         ) : (
           // Unauthenticated state
           <>
-            <p style={{ fontSize: '1.1rem', marginBottom: '0.5rem' }}>
-              Please login to continue
-            </p>
+            <p style={{ fontSize: '1.1rem', marginBottom: '0.5rem' }}>Please login to continue</p>
 
             <p style={{ color: '#888', fontSize: '0.9rem' }}>
               {Capacitor.isNativePlatform()
-                ? "Tap the button below to authenticate via in-app browser"
-                : "Connect with your Microsoft account to access the application"
-              }
+                ? 'Tap the button below to authenticate via in-app browser'
+                : 'Connect with your Microsoft account to access the application'}
             </p>
 
-            <button onClick={() => logIn()}>
-              {Capacitor.isNativePlatform() ? '🔐 Login' : 'Log in'}
-            </button>
+            <button onClick={() => logIn()}>{Capacitor.isNativePlatform() ? '🔐 Login' : 'Log in'}</button>
 
             {Capacitor.isNativePlatform() && (
-              <div style={{
-                marginTop: '1rem',
-                padding: '0.5rem',
-                backgroundColor: '#1a1a1a',
-                borderRadius: '4px',
-                fontSize: '0.8rem',
-                color: '#888'
-              }}>
+              <div
+                style={{
+                  marginTop: '1rem',
+                  padding: '0.5rem',
+                  backgroundColor: '#1a1a1a',
+                  borderRadius: '4px',
+                  fontSize: '0.8rem',
+                  color: '#888',
+                }}
+              >
                 <p>🔧 Debug: Deep link scheme configured</p>
                 <p>Platform: {Capacitor.getPlatform()}</p>
               </div>
@@ -151,11 +142,10 @@ function App() {
         )}
       </div>
 
-      <p className="read-the-docs">
+      <p className='read-the-docs'>
         {Capacitor.isNativePlatform()
-          ? "Enjoy seamless OAuth authentication in your native app!"
-          : "Click on the Vite and React logos to learn more"
-        }
+          ? 'Enjoy seamless OAuth authentication in your native app!'
+          : 'Click on the Vite and React logos to learn more'}
       </p>
     </>
   )

examples/react-capacitor-app/app/src/main.tsx

@@ -1,8 +1,8 @@
+import { Browser } from '@capacitor/browser'
+import { Capacitor } from '@capacitor/core'
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import ReactDOM, { createRoot } from 'react-dom/client'
 import { AuthProvider, type TAuthConfig } from 'react-oauth2-code-pkce'
-import { Capacitor } from '@capacitor/core'
-import { Browser } from '@capacitor/browser'
 import App from './App.tsx'
 import './index.css'
 
@@ -45,8 +45,7 @@ const authConfig: TAuthConfig = {
   clientId: '6559ce69-219d-4e82-b6ed-889a861c7c94',
   authorizationEndpoint:
     'https://login.microsoftonline.com/d422398d-b6a5-454d-a202-7ed4c1bec457/oauth2/v2.0/authorize',
-  tokenEndpoint:
-    'https://login.microsoftonline.com/d422398d-b6a5-454d-a202-7ed4c1bec457/oauth2/v2.0/token',
+  tokenEndpoint: 'https://login.microsoftonline.com/d422398d-b6a5-454d-a202-7ed4c1bec457/oauth2/v2.0/token',
 
   // Use deep link for Capacitor, localhost for web
   redirectUri: isCapacitor()
@@ -85,10 +84,13 @@ const authConfig: TAuthConfig = {
  * Root component that wraps the App with AuthProvider
  * This ensures authentication context is available throughout the app
  */
-ReactDOM.createRoot(document.getElementById('root')!).render(
+const container = document.getElementById('root')
+if (!container) throw new Error('No container found')
+const root = createRoot(container)
+root.render(
   <React.StrictMode>
     <AuthProvider authConfig={authConfig}>
       <App />
     </AuthProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 )

examples/react-capacitor-app/app/tsconfig.app.json

@@ -6,16 +6,12 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

examples/react-capacitor-app/app/tsconfig.node.json

@@ -5,15 +5,11 @@
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,