Decouple auth

__fixtures__/test-project/api/src/functions/auth.ts

@@ -1,7 +1,9 @@
 import type { APIGatewayProxyEvent, Context } from 'aws-lambda'
 
-import { DbAuthHandler } from '@redwoodjs/api'
-import type { DbAuthHandlerOptions } from '@redwoodjs/api'
+import {
+  DbAuthHandler,
+  DbAuthHandlerOptions,
+} from '@redwoodjs/auth-providers-api/dist/dbAuth'
 
 import { db } from 'src/lib/db'
 

__fixtures__/test-project/api/src/functions/graphql.ts

@@ -1,3 +1,4 @@
+import { dbAuthAuthDecoder as authDecoder } from '@redwoodjs/auth-providers-api'
 import { createGraphQLHandler } from '@redwoodjs/graphql-server'
 
 import directives from 'src/directives/**/*.{js,ts}'
@@ -9,6 +10,7 @@ import { db } from 'src/lib/db'
 import { logger } from 'src/lib/logger'
 
 export const handler = createGraphQLHandler({
+  authDecoder,
   getCurrentUser,
   loggerConfig: { logger, options: {} },
   directives,

__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts

@@ -10,7 +10,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String9043010',
+            email: 'String3085996',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',
@@ -24,7 +24,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String3280784',
+            email: 'String9850549',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',

__fixtures__/test-project/api/src/services/users/users.scenarios.ts

@@ -6,15 +6,15 @@ export const standard = defineScenario<Prisma.UserCreateArgs>({
   user: {
     one: {
       data: {
-        email: 'String4277909',
+        email: 'String1877407',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',
       },
     },
     two: {
       data: {
-        email: 'String493680',
+        email: 'String6139882',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',

__fixtures__/test-project/scripts/seed.ts

@@ -95,7 +95,7 @@ export default async () => {
     // and associated `salt` to their record. Here's how to create them using
     // the same algorithm that dbAuth uses internally:
     //
-    //   import { hashPassword } from '@redwoodjs/api'
+    //   import { hashPassword } from '@redwoodjs/auth-providers-api/dbAuth'
     //
     //   const users = [
     //     { name: 'john', email: 'john@example.com', password: 'secret1' },

__fixtures__/test-project/web/package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.12",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.17",
     "postcss-loader": "^7.0.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.1.8"

__fixtures__/test-project/web/src/App.tsx

@@ -1,18 +1,19 @@
-import { AuthProvider } from '@redwoodjs/auth'
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
+import { AuthProvider, useAuth } from './auth'
+
 import './scaffold.css'
 import './index.css'
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <AuthProvider type="dbAuth">
-        <RedwoodApolloProvider>
+      <AuthProvider>
+        <RedwoodApolloProvider useAuth={useAuth}>
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

__fixtures__/test-project/web/src/Routes.tsx

@@ -13,9 +13,11 @@ import BlogLayout from 'src/layouts/BlogLayout'
 import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
 import HomePage from 'src/pages/HomePage'
 
+import { useAuth } from './auth'
+
 const Routes = () => {
   return (
-    <Router>
+    <Router useAuth={useAuth}>
       <Route path="/login" page={LoginPage} name="login" />
       <Route path="/signup" page={SignupPage} name="signup" />
       <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />

__fixtures__/test-project/web/src/auth.ts

@@ -0,0 +1,3 @@
+import { createDbAuth } from '@redwoodjs/auth-providers-web'
+
+export const { AuthProvider, useAuth } = createDbAuth()

__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx

@@ -2,9 +2,10 @@ type BlogLayoutProps = {
   children?: React.ReactNode
 }
 
-import { useAuth } from '@redwoodjs/auth'
 import { Link, routes } from '@redwoodjs/router'
 
+import { useAuth } from 'src/auth'
+
 const BlogLayout = ({ children }: BlogLayoutProps) => {
   const { logOut, isAuthenticated } = useAuth()
 

__fixtures__/test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useRef } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import { Form, Label, TextField, Submit, FieldError } from '@redwoodjs/forms'
 import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const ForgotPasswordPage = () => {
   const { isAuthenticated, forgotPassword } = useAuth()
 

__fixtures__/test-project/web/src/pages/LoginPage/LoginPage.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import { useEffect } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -14,6 +13,8 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const LoginPage = () => {
   const { isAuthenticated, logIn } = useAuth()
 

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.tsx

@@ -1,7 +1,8 @@
-import { useAuth } from '@redwoodjs/auth'
 import { Link, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 
+import { useAuth } from 'src/auth'
+
 const ProfilePage = () => {
   const { currentUser, isAuthenticated, hasRole, loading } = useAuth()
 

__fixtures__/test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -12,6 +11,8 @@ import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
   const { isAuthenticated, reauthenticate, validateResetToken, resetPassword } =
     useAuth()

__fixtures__/test-project/web/src/pages/SignupPage/SignupPage.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import { useEffect } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -14,6 +13,8 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const SignupPage = () => {
   const { isAuthenticated, signUp } = useAuth()
 

packages/api/src/auth/decoded.ts

@@ -0,0 +1 @@
+export type Decoded = Record<string, unknown> | null