Merge branch 'main' of github.com:redwoodjs/redwood into feat/vite-ssr

* 'main' of github.com:redwoodjs/redwood: (162 commits)
  fix(deps): update dependency @escape.tech/graphql-armor to v1.8.0 (redwoodjs#7922)
  chore(deps): update dependency @playwright/test to v1.32.1 (redwoodjs#7924)
  chore(deps): update dependency @testing-library/dom to v9.2.0 (redwoodjs#7921)
  chore(deps): update dependency rimraf to v4 (redwoodjs#7907)
  fix(deps): update dependency react-hook-form to v7.43.8 (redwoodjs#7920)
  fix(deps): update dependency @fastify/http-proxy to v9 (redwoodjs#7889)
  fix(deps): update dependency @types/node to v16.18.20 (redwoodjs#7919)
  chore(deps): update dependency @replayio/playwright to v0.3.27 (redwoodjs#7918)
  fix(Clerk): call reauthenticate before navigating (redwoodjs#7917)
  chore(deps): update dependency esbuild to v0.17.13 (redwoodjs#7915)
  chore(deps): update dependency lerna to v6.6.1 (redwoodjs#7916)
  chore(deps): update dependency @tsd/typescript to v5 (redwoodjs#7856)
  chore(deps): update dependency @testing-library/dom to v9.1.0 (redwoodjs#7914)
  fix(deps): update dependency msw to v1.2.1 (redwoodjs#7911)
  chore(deps): update dependency @types/react to v18.0.29 (redwoodjs#7912)
  chore(deps): update dependency nx to v15.8.9 (redwoodjs#7913)
  Fix for directUrl usage during testing (redwoodjs#7898)
  fix(deps): update dependency prettier to v2.8.7 (redwoodjs#7908)
  chore(deps): update dependency @nrwl/nx-cloud to v15.3.2 (redwoodjs#7904)
  fix(deps): update dependency @types/node to v16.18.19 (redwoodjs#7906)
  ...

.eslintrc.js

@@ -80,6 +80,7 @@ module.exports = {
         'packages/api/src/**',
         'packages/graphql-server/src/**',
         'packages/record/src/**',
+        'packages/project-config/src/**',
       ],
       rules: {
         'no-restricted-imports': [

.github/actions/check_test_project_fixture/package.json

@@ -5,5 +5,5 @@
     "@actions/core": "1.10.0",
     "@actions/exec": "1.1.1"
   },
-  "packageManager": "yarn@3.4.1"
+  "packageManager": "yarn@3.5.0"
 }

.github/actions/only_doc_changes/package.json

@@ -5,5 +5,5 @@
     "@actions/core": "1.10.0",
     "@actions/exec": "1.1.1"
   },
-  "packageManager": "yarn@3.4.1"
+  "packageManager": "yarn@3.5.0"
 }

.github/renovate.json

@@ -36,6 +36,7 @@
     "@redwoodjs/graphql-server",
     "@redwoodjs/internal",
     "@redwoodjs/prerender",
+    "@redwoodjs/project-config",
     "@redwoodjs/record",
     "@redwoodjs/router",
     "@redwoodjs/structure",

.yarnrc.yml

@@ -16,4 +16,4 @@ plugins:
 
 preferInteractive: true
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

README.md

@@ -43,7 +43,7 @@ TOML (an obvious, minimal configuration language used by many projects).
 application looks like, take a look at the following projects:
 
 - [Todo](https://github.com/redwoodjs/example-todo)
-- [Blog](https://github.com/redwoodjs/example-blog)
+- [Store](https://github.com/redwoodjs/example-store-stripe)
 - [Invoice](https://github.com/redwoodjs/example-invoice)
 
 ## Technologies

__fixtures__/empty-project/api/db/schema.prisma

@@ -1,6 +1,7 @@
 datasource db {
-  provider = "sqlite"
-  url      = env("DATABASE_URL")
+  provider  = "sqlite"
+  url       = env("DATABASE_URL")
+  directUrl = env("DIRECT_URL")
 }
 
 generator client {

__fixtures__/test-project/.yarnrc.yml

@@ -14,4 +14,4 @@ nmMode: hardlinks-local
 # Heads up: right now, Redwood expects this to be `node-modules`.
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

__fixtures__/test-project/api/tsconfig.json

@@ -6,7 +6,7 @@
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "baseUrl": "./",
     "rootDirs": [
       "./src",

__fixtures__/test-project/package.json

@@ -20,5 +20,5 @@
   "prisma": {
     "seed": "yarn rw exec seed"
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.5.0"
 }

__fixtures__/test-project/web/package.json

@@ -23,10 +23,10 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "prettier-plugin-tailwindcss": "^0.2.1",
-    "tailwindcss": "^3.2.4"
+    "postcss-loader": "^7.1.0",
+    "prettier-plugin-tailwindcss": "^0.2.5",
+    "tailwindcss": "^3.2.7"
   }
 }

__fixtures__/test-project/web/tsconfig.json

@@ -7,7 +7,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "rootDirs": [
       "./src",
       "../.redwood/types/mirror/web/src",

docs/README.md

@@ -28,12 +28,15 @@ In [previous section](./first-page) we....
 
 ## Contributing
 
-Open a PR against the repo on GitHub. That will build and launch a copy of the site that you can get from the `netlify/redwoodjs/deploy-preview` check (click "Details" to open it):
+Fork the repo, make your changes and open a PR on GitHub. That will build and launch a copy of the site that you can get from the `netlify/redwoodjs/deploy-preview` check (click "Details" to open it):
 
 ![image](https://user-images.githubusercontent.com/300/76569613-c4421000-6470-11ea-8223-eb98504e6994.png)
 
 Double check that your changes look good!
 
+### Updating Doc Images
+To update any images in the doc, first upload your screenshot into a comment textbox in your PR. Once it's uploaded, you can open the image in a new tab and use the github url as a image link in your docs.
+
 ## Contributors
 
 Redwood is amazing thanks to a wonderful [community of contributors](https://github.com/redwoodjs/redwood/blob/main/README.md#contributors).

docs/docs/auth/supabase.md

@@ -15,6 +15,8 @@ yarn rw setup auth supabase
 This installs all the packages, writes all the files, and makes all the code modifications you need.
 For a detailed explanation of all the api- and web-side changes that aren't exclusive to Supabase, see the top-level [Authentication](../authentication.md) doc. For now, let's focus on Supabase's side of things.
 
+## Setup
+
 If you don't have a Supabase account yet, now's the time to make one: navigate to https://supabase.com and click "Start your project" in the top right. Then sign up and create an organization and a project.
 
 While Supabase creates your project, it thoughtfully shows your project's API keys.
@@ -42,8 +44,23 @@ Lastly, in `redwood.toml`, include `SUPABASE_URL` and `SUPABASE_KEY` in the list
   includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
 ```
 
-That should be enough; now, things should just work.
+
+
+## Authentication UI
+
+Supabase doesn't redirect to a hosted sign-up page or open a sign-up modal.
+In a real app, you'd build a form here, but we're going to hardcode an email and password.
+
+### Basic Example
+
+After you sign up, head to your inbox: there should be a confirmation email from Supabase waiting for you.
+
+Click the link, then head back to your app.
+Once you refresh the page, you should see `{"isAuthenticated":true}` on the page.
+
+
 Let's make sure: if this is a brand new project, generate a home page.
+
 There we'll try to sign up by destructuring `signUp` from the `useAuth` hook (import that from `'src/auth'`). We'll also destructure and display `isAuthenticated` to see if it worked:
 
 ```tsx title="web/src/pages/HomePage.tsx"
@@ -66,8 +83,195 @@ const HomePage = () => {
 }
 ```
 
-Supabase doesn't redirect to a hosted sign-up page or open a sign-up modal.
-In a real app, you'd build a form here, but we're going to hardcode an email and password.
-After you sign up, head to your inbox: there should be a confirmation email from Supabase waiting for you.
-Click the link, then head back to your app.
-Once you refresh the page, you should see `{"isAuthenticated":true}` on the page.
+## Authentication Reference
+
+You will notice that [Supabase Javascript SDK Auth API](https://supabase.com/docs/reference/javascript/auth-api) reference documentation presents methods to sign in with the various integrations Supabase supports: password, OAuth, IDToken, SSO, etc.
+
+The RedwoodJS implementation of Supabase authentication supports these as well, but within the `logIn` method of the `useAuth` hook.
+
+That means that you will see that Supabase documents sign in with email password as:
+
+```ts
+const { data, error } = await supabase.auth.signInWithPassword({
+  email: '[email protected]',
+  password: 'example-password',
+})
+```
+
+In RedwoodJS, you will always use `logIn` and pass the necessary credential options and also an `authenticationMethod` to declare how you want to authenticate.
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'password',
+  email: '[email protected]',
+  password: 'example-password',
+})
+```
+
+### Sign Up with email and password
+
+Creates a new user.
+
+```ts
+const { signUp } = useAuth()
+
+await signUp({
+  email: '[email protected]',
+  password: 'example-password',
+})
+```
+
+### Sign in a user with email and password
+
+Log in an existing user with an email and password or phone and password.
+
+* Requires either an email and password or a phone number and password.
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'password',
+  email: '[email protected]',
+  password: 'example-password',
+})
+```
+
+### Sign in a user through Passwordless/OTP
+
+Log in a user using magiclink or a one-time password (OTP).
+
+* Requires either an email or phone number.
+
+* This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'otp',
+  email: '[email protected]',
+  options: {
+    emailRedirectTo: 'https://example.com/welcome'
+  }
+})
+```
+
+### Sign in a user through OAuth
+
+Log in an existing user via a third-party provider.
+
+* This method is used for signing in using a third-party provider.
+
+* Supabase supports many different [third-party providers](https://supabase.com/docs/guides/auth#providers).
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'otp',
+  email: '[email protected]',
+  options: {
+    emailRedirectTo: 'https://example.com/welcome'
+  }
+})
+```
+
+### Sign in a user with IDToken
+
+Log in a user using IDToken.
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'id_token',
+  provider: 'apple',
+  token: 'cortland-apple-id-token',
+})
+```
+
+### Sign in a user with SSO
+
+Log in a user using IDToken.
+
+```ts
+const { logIn } = useAuth()
+
+await logIn({
+  authenticationMethod: 'sso',
+  providerId: 'sso-provider-identity-uuid',
+  domain: 'example.com',
+})
+```
+
+### Sign out a user
+
+Inside a browser context, signOut() will remove the logged in user from the browser session and log them out - removing all items from localStorage and then trigger a "SIGNED_OUT" event.
+
+In order to use the signOut() method, the user needs to be signed in first.
+
+```ts
+const { logOut } = useAuth()
+
+logOut()
+```
+
+
+### Verify and log in through OTP
+
+Log in a user given a User supplied OTP received via mobile.
+
+* The verifyOtp method takes in different verification types. If a phone number is used, the type can either be sms or phone_change. If an email address is used, the type can be one of the following: signup, magiclink, recovery, invite or email_change.
+
+* The verification type used should be determined based on the corresponding auth method called before verifyOtp to sign up / sign-in a user.
+
+
+The RedwoodJS auth provider doesn't expose the `veriftyOtp` method from the Supabase SDK directly.
+
+Instead, since you always have access the the Supabase Auth client, you can access any method it exposes.
+
+So, in order to use the `verifyOtp` method, you would:
+
+```ts
+const { client } = useAuth()
+
+const { data, error } = await client.verifyOtp({ phone, token, type: 'sms'})
+```
+
+### Access the Supabase Auth Client
+
+Sometimes you may need to access the Supabase Auth client directly.
+
+```ts
+const { client } = useAuth()
+```
+
+You can then use it to work with Supabase sessions, or auth events.
+
+
+### Retrieve a session
+
+Returns the session, refreshing it if necessary. The session returned can be null if the session is not detected which can happen in the event a user is not signed-in or has logged out.
+
+```ts
+const { client } = useAuth()
+
+const { data, error } = await client.getSession()
+```
+
+### Listen to auth events
+
+Receive a notification every time an auth event happens.
+
+* Types of auth events: `SIGNED_IN`, `SIGNED_OUT`, `TOKEN_REFRESHED`, `USER_UPDATED`, `PASSWORD_RECOVERY`
+
+```ts
+const { client } = useAuth()
+
+client.onAuthStateChange((event, session) => {
+  console.log(event, session)
+})
+```