diff --git a/.changesets/10460.md b/.changesets/10460.md new file mode 100644 index 000000000000..19bb349dd502 --- /dev/null +++ b/.changesets/10460.md @@ -0,0 +1,38 @@ +- chore(dbauth-mw): Refactor web side dbAuth creation (#10460) by @dac09 + +This PR changes how the webside auth is initialised, by removing the `createMiddlewareAuth` function, instead it just detects it internally. + +For dbAuth this is what it will looks like: + +```js:web/src/auth.ts +import { + createDbAuthClient, + createAuth, +} from '@redwoodjs/auth-dbauth-web' + +const dbAuthClient = createDbAuthClient({ + middleware: true, +}) + +// Internally we know to use the middleware version of the client +// because middleware is set to true above! +export const { AuthProvider, useAuth } = createAuth(dbAuthClient) + +``` + +For other auth providers we are going to export a similar looking function: + +```js +import { createAuth, createSupabaseAuthClient } from '@redwoodjs/auth-supabase-web' + +// This function is new, and just wraps creating supabase👇 +const supabaseClient = createSupabaseAuthClient({ + supabaseUrl: process.env.SUPABASE_URL || '', + supabaseKey: process.env.SUPABASE_KEY || '', + middleware: true +}) + +export const { AuthProvider, useAuth } = createAuth(supabaseClient) +``` + +This also means our users won't need to change where supabase client is imported from, for example. diff --git a/packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.middleware.test.ts b/packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.middleware.test.ts index 199e3d8d9aa0..c781b0e29ca4 100644 --- a/packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.middleware.test.ts +++ b/packages/auth-providers/dbAuth/web/src/__tests__/dbAuth.middleware.test.ts @@ -1,7 +1,7 @@ import { act, renderHook } from '@testing-library/react' import type { CustomProviderHooks, DbAuthClientArgs } from '../dbAuth' -import { createDbAuthClient, createMiddlewareAuth } from '../dbAuth' +import { createDbAuthClient, createAuth } from '../dbAuth' import { fetchMock } from './dbAuth.test' @@ -16,7 +16,7 @@ export function getMwDbAuth( ) { // We have to create a special createDbAuthClient with middleware = true const dbAuthClient = createDbAuthClient({ ...args, middleware: true }) - const { useAuth, AuthProvider } = createMiddlewareAuth(dbAuthClient, { + const { useAuth, AuthProvider } = createAuth(dbAuthClient, { useCurrentUser: args.useCurrentUser, useHasRole: args.useHasRole, }) diff --git a/packages/auth-providers/dbAuth/web/src/dbAuth.ts b/packages/auth-providers/dbAuth/web/src/dbAuth.ts index dcb84e414083..3dcfc4414b44 100644 --- a/packages/auth-providers/dbAuth/web/src/dbAuth.ts +++ b/packages/auth-providers/dbAuth/web/src/dbAuth.ts @@ -25,13 +25,14 @@ export type CustomProviderHooks = { ) => (rolesToCheck: string | string[]) => boolean } -export function createMiddlewareAuth( +// This is the middleware-edition auth function +// Overrides the default getCurrentUser to fetch it from middleware instead +function createMiddlewareAuth( dbAuthClient: ReturnType, customProviderHooks?: CustomProviderHooks, ) { return createAuthentication(dbAuthClient, { // @MARK This is key! 👇 - // Override the default getCurrentUser to fetch it from middleware instead ...customProviderHooks, useCurrentUser: customProviderHooks?.useCurrentUser ?? @@ -48,6 +49,10 @@ export function createAuth( ) => (rolesToCheck: string | string[]) => boolean }, ) { + if (dbAuthClient.useMiddlewareAuth) { + return createMiddlewareAuth(dbAuthClient, customProviderHooks) + } + return createAuthentication(dbAuthClient, customProviderHooks) }