feat: add auth hooks

tmm · tmm · commit 04e68d7e274f · 2021-04-28T23:10:52.000-04:00
diff --git a/.config/husky/commit-msg b/.config/husky/commit-msg
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx commitlint --config .config/.commitlintrc --edit $1
+yarn commitlint --config .config/.commitlintrc --edit $1
diff --git a/.config/husky/pre-commit b/.config/husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged --config .config/.lintstagedrc
+yarn lint-staged --config .config/.lintstagedrc
diff --git a/.eslintrc b/.eslintrc
@@ -6,7 +6,7 @@
         "sourceType": "module",
         "ecmaFeatures": {
             "impliedStrict": true,
-            "experimentalObjectRestSpread": true,
+            "experimentalObjectRestSpread": true
         },
         "allowImportExportEverywhere": true
     },
diff --git a/.prettierrc b/.prettierrc
@@ -7,6 +7,12 @@
     "tabWidth": 4,
     "trailingComma": "all",
     "overrides": [
+        {
+            "files": "*.md",
+            "options": {
+                "tabWidth": 2
+            }
+        },
         {
             "files": "*.yaml",
             "options": {
diff --git a/README.md b/README.md
@@ -4,18 +4,55 @@
 
 <br/>
 
-## Usage
+## Installation
 
-Inside your React project directory, run the following:
+Inside your React project directory, install:
 
 ```
-yarn add react-supabase
+yarn add react-supabase @supabase/supabase-js
+# or
+npm install --save react-supabase @supabase/supabase-js
 ```
 
-Or with npm:
+<br/>
+
+## Usage
+
+Create a Supabase client and pass it to the `Provider`:
+
+```js
+import { createClient } from '@supabase/supabase-js'
+import { Provider } from 'react-supabase'
 
+const client = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
+
+const App = () => (
+  <Provider value={client}>
+    <YourRoutes />
+  </Provider>
+)
 ```
-npm install react-supabase
+
+Now every component and element inside and under the `Provider` can use the Supabase client:
+
+```js
+import { useSelect } from 'react-supabase'
+
+const Todos = () => {
+  const [result, reexecuteSelect] = useSelect('todos')
+
+  const { data, fetching, error } = result
+
+  if (fetching) return <p>Loading...</p>
+  if (error) return <p>Oh no... {error.message}</p>
+  return (
+    <ul>
+      {data.map((todo) => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
 ```
 
 <br/>
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     preset: 'ts-jest',
-    testRegex: '/test/.*\\.test\\.tsx$',
+    testRegex: '.*\\.test\\.(ts|tsx)$',
     watchPlugins: [
         'jest-watch-typeahead/filename',
         'jest-watch-typeahead/testname',
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
         "@types/react": "^17.0.3",
         "@typescript-eslint/eslint-plugin": "^4.22.0",
         "@typescript-eslint/parser": "^4.22.0",
+        "commitlint": "^12.1.1",
         "concurrently": "^6.0.2",
         "eslint": "^7.24.0",
         "eslint-config-prettier": "^8.2.0",
@@ -50,6 +51,7 @@
         "husky": "^6.0.0",
         "jest": "^26.6.3",
         "jest-watch-typeahead": "^0.6.3",
+        "lint-staged": "^10.5.4",
         "prettier": "^2.2.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
diff --git a/src/hooks/auth/index.ts b/src/hooks/auth/index.ts
@@ -0,0 +1,5 @@
+export * from './use-auth-state-change'
+export * from './use-reset-password'
+export * from './use-signin'
+export * from './use-signout'
+export * from './use-signup'
diff --git a/src/hooks/auth/state.ts b/src/hooks/auth/state.ts
@@ -0,0 +1,6 @@
+export const initialState = {
+    error: undefined,
+    fetching: false,
+    session: undefined,
+    user: undefined,
+}
diff --git a/src/hooks/auth/use-auth-state-change.ts b/src/hooks/auth/use-auth-state-change.ts
@@ -0,0 +1,19 @@
+import { AuthChangeEvent, Session } from '@supabase/gotrue-js'
+import { useEffect } from 'react'
+
+import { useClient } from '../use-client'
+
+export function useAuthStateChange(
+    callback: (event: AuthChangeEvent, session: Session | null) => void,
+) {
+    const client = useClient()
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+        const { data: authListener } = client.auth.onAuthStateChange(callback)
+        return () => {
+            authListener?.unsubscribe()
+        }
+    }, [])
+    /* eslint-enable react-hooks/exhaustive-deps */
+}
diff --git a/src/hooks/auth/use-reset-password.ts b/src/hooks/auth/use-reset-password.ts
@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react'
+
+import { useClient } from '../use-client'
+
+export type UseResetPasswordState = {
+    error?: Error | null
+    fetching: boolean
+}
+
+export type UseResetPasswordResponse = [
+    UseResetPasswordState,
+    (
+        email: string,
+        options?: UseResetPasswordOptions,
+    ) => Promise<Pick<UseResetPasswordState, 'error'>>,
+]
+
+export type UseResetPasswordOptions = {
+    redirectTo?: string
+}
+
+export type UseResetPasswordConfig = {
+    options?: UseResetPasswordOptions
+}
+
+const initialState = {
+    error: undefined,
+    fetching: false,
+}
+
+export function useResetPassword(
+    config: UseResetPasswordConfig = {},
+): UseResetPasswordResponse {
+    const client = useClient()
+    const [state, setState] = useState<UseResetPasswordState>(initialState)
+
+    const execute = useCallback(
+        async (email: string, options?: UseResetPasswordOptions) => {
+            setState({ ...initialState, fetching: true })
+            const { error } = await client.auth.api.resetPasswordForEmail(
+                email,
+                options ?? config.options,
+            )
+            const res = { error }
+            setState({ ...res, fetching: false })
+            return res
+        },
+        [client, config],
+    )
+
+    return [state, execute]
+}
diff --git a/src/hooks/auth/use-signin.ts b/src/hooks/auth/use-signin.ts
@@ -0,0 +1,54 @@
+import { Provider, Session, User, UserCredentials } from '@supabase/gotrue-js'
+import { useCallback, useState } from 'react'
+
+import { useClient } from '../use-client'
+import { initialState } from './state'
+
+export type UseSignInState = {
+    error?: Error | null
+    fetching: boolean
+    session?: Session | null
+    user?: User | null
+}
+
+export type UseSignInResponse = [
+    UseSignInState,
+    (
+        credentials: UserCredentials,
+        options?: UseSignInOptions,
+    ) => Promise<Pick<UseSignInState, 'error' | 'session' | 'user'>>,
+]
+
+export type UseSignInOptions = {
+    redirectTo?: string
+    scopes?: string
+}
+
+export type UseSignInConfig = {
+    provider?: Provider
+    options?: UseSignInOptions
+}
+
+export function useSignIn(config: UseSignInConfig = {}): UseSignInResponse {
+    const client = useClient()
+    const [state, setState] = useState<UseSignInState>(initialState)
+
+    const execute = useCallback(
+        async (credentials: UserCredentials, options?: UseSignInOptions) => {
+            setState({ ...initialState, fetching: true })
+            const { error, session, user } = await client.auth.signIn(
+                {
+                    provider: config.provider,
+                    ...credentials,
+                },
+                options ?? config.options,
+            )
+            const res = { error, session, user }
+            setState({ ...res, fetching: false })
+            return res
+        },
+        [client, config],
+    )
+
+    return [state, execute]
+}
diff --git a/src/hooks/auth/use-signout.ts b/src/hooks/auth/use-signout.ts
@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react'
+
+import { useClient } from '../use-client'
+
+export type UseSignOutState = {
+    error?: Error | null
+    fetching: boolean
+}
+
+export type UseSignOutResponse = [
+    UseSignOutState,
+    () => Promise<Pick<UseSignOutState, 'error'>>,
+]
+
+const initialState = {
+    error: undefined,
+    fetching: false,
+}
+
+export function useSignOut(): UseSignOutResponse {
+    const client = useClient()
+    const [state, setState] = useState<UseSignOutState>(initialState)
+
+    const execute = useCallback(async () => {
+        setState({ ...initialState, fetching: true })
+        const { error } = await client.auth.signOut()
+        const res = { error }
+        setState({ ...res, fetching: false })
+        return res
+    }, [client])
+
+    return [state, execute]
+}
diff --git a/src/hooks/auth/use-signup.ts b/src/hooks/auth/use-signup.ts
@@ -0,0 +1,49 @@
+import { Session, User, UserCredentials } from '@supabase/gotrue-js'
+import { useCallback, useState } from 'react'
+
+import { useClient } from '../use-client'
+import { initialState } from './state'
+
+export type UseSignUpState = {
+    error?: Error | null
+    fetching: boolean
+    session?: Session | null
+    user?: User | null
+}
+
+export type UseSignUpResponse = [
+    UseSignUpState,
+    (
+        credentials: UserCredentials,
+        options?: UseSignUpOptions,
+    ) => Promise<Pick<UseSignUpState, 'error' | 'session' | 'user'>>,
+]
+
+export type UseSignUpOptions = {
+    redirectTo?: string
+}
+
+export type UseSignUpConfig = {
+    options?: UseSignUpOptions
+}
+
+export function useSignUp(config: UseSignUpConfig = {}): UseSignUpResponse {
+    const client = useClient()
+    const [state, setState] = useState<UseSignUpState>(initialState)
+
+    const execute = useCallback(
+        async (credentials: UserCredentials, options?: UseSignUpOptions) => {
+            setState({ ...initialState, fetching: true })
+            const { error, session, user } = await client.auth.signUp(
+                credentials,
+                options ?? config.options,
+            )
+            const res = { error, session, user }
+            setState({ ...res, fetching: false })
+            return res
+        },
+        [client, config],
+    )
+
+    return [state, execute]
+}
diff --git a/src/hooks/data/state.ts b/src/hooks/data/state.ts
diff --git a/src/hooks/data/use-delete.ts b/src/hooks/data/use-delete.ts
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { Count, Filter, PostgrestError, Returning } from '../../types'
-import { initialState } from '../state'
 import { useClient } from '../use-client'
+import { initialState } from './state'
 
 export type UseDeleteState<Data = any> = {
     count?: number | null
diff --git a/src/hooks/data/use-insert.ts b/src/hooks/data/use-insert.ts
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { Count, PostgrestError, Returning } from '../../types'
-import { initialState } from '../state'
 import { useClient } from '../use-client'
+import { initialState } from './state'
 
 export type UseInsertState<Data = any> = {
     count?: number | null
diff --git a/src/hooks/data/use-select.ts b/src/hooks/data/use-select.ts
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Count, Filter, PostgrestError } from '../../types'
-import { initialState } from '../state'
 import { useClient } from '../use-client'
+import { initialState } from './state'
 
 export type UseSelectState<Data = any> = {
     count?: number | null
diff --git a/src/hooks/data/use-update.ts b/src/hooks/data/use-update.ts
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { Count, Filter, PostgrestError, Returning } from '../../types'
-import { initialState } from '../state'
 import { useClient } from '../use-client'
+import { initialState } from './state'
 
 export type UseUpdateState<Data = any> = {
     count?: number | null
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from './auth'
 export * from './data'
 export * from './realtime'
 export * from './use-client'
diff --git a/test/__snapshots__/use-auth-state-change.test.tsx.snap b/test/__snapshots__/use-auth-state-change.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useAuthStateChange should throw when not inside Provider 1`] = `"No client has been specified using Provider."`;
diff --git a/test/__snapshots__/use-reset-password.test.tsx.snap b/test/__snapshots__/use-reset-password.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useResetPassword should throw when not inside Provider 1`] = `"No client has been specified using Provider."`;
diff --git a/test/__snapshots__/use-signin.test.tsx.snap b/test/__snapshots__/use-signin.test.tsx.snap
diff --git a/test/__snapshots__/use-signout.test.tsx.snap b/test/__snapshots__/use-signout.test.tsx.snap
diff --git a/test/__snapshots__/use-signup.test.tsx.snap b/test/__snapshots__/use-signup.test.tsx.snap
diff --git a/test/use-auth-state-change.test.tsx b/test/use-auth-state-change.test.tsx
diff --git a/test/use-reset-password.test.tsx b/test/use-reset-password.test.tsx
diff --git a/test/use-signin.test.tsx b/test/use-signin.test.tsx
diff --git a/test/use-signout.test.tsx b/test/use-signout.test.tsx
diff --git a/test/use-signup.test.tsx b/test/use-signup.test.tsx
diff --git a/yarn.lock b/yarn.lock
