Merge pull request #16497 from supabase/feat/add-cli-email-template-docs

Add docs for email template in local supabase

apps/docs/components/CustomHTMLElements/Heading.tsx

@@ -26,7 +26,7 @@ interface Props {
  *
  * In tsx files, we can generate this tocList directly. For these files, we don't
  * need to parse the <a> and generate anchors. Custom anchors are used in tsx files.
- * (see: /pages/reference/cli/config.tsx)
+ * (see: /pages/guides/cli/config.tsx)
  */
 const Heading: React.FC<Props> = ({ tag, customAnchor, children }) => {
   const HeadingTag = `${tag}` as any

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -1042,6 +1042,10 @@ export const supabase_cli: NavMenuConstant = {
           name: 'Testing and linting',
           url: '/guides/cli/testing-and-linting',
         },
+        {
+          name: 'Customizing email templates',
+          url: '/guides/cli/customizing-email-templates',
+        },
       ],
     },
     {

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -95,7 +95,7 @@ const menus: Menu[] = [
   },
   {
     id: 'supabase_cli',
-    // TODO: Add path '/reference/cli/config'
+    // TODO: Add path '/guides/cli/config'
     path: '/guides/cli',
     type: 'guide',
   },

apps/docs/data/nav/supabase-cli.ts

@@ -4,7 +4,7 @@ const Nav = [
     items: [
       { name: 'Supabase CLI', url: '/reference/cli', items: [] },
       { name: 'Usage', url: '/reference/cli/usage', items: [] },
-      { name: 'Configuration', url: '/reference/cli/config', items: [] },
+      { name: 'Configuration', url: '/guides/cli/config', items: [] },
       { name: 'Release Notes', url: '/reference/cli/release-notes', items: [] },
     ],
   },

apps/docs/pages/guides/cli/customizing-email-templates.mdx

@@ -0,0 +1,124 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'customizing-email-templates',
+  title: 'Customizing email templates',
+  description: 'Customizing local email templates using config.toml.',
+  subtitle: 'Customizing local email templates using config.toml.',
+}
+
+You can customize the email templates for local development [using the `config.toml` settings](/docs/guides/cli/config#auth-config).
+
+## Configuring Templates
+
+You should provide a relative URL to the `content_path` parameter, pointing to an HTML file which contains the template. For example
+
+<CH.Code>
+
+```toml supabase/config.toml
+[auth.email.template.invite]
+subject = "You are invited to Acme Inc"
+content_path = "./supabase/templates/invite.html"
+```
+
+```html supabase/templates/invite.html
+<html>
+  <body>
+    <h2>Confirm your signup</h2>
+    <p><a href="{{ .ConfirmationURL }}">Confirm your email</a></p>
+  </body>
+</html>
+```
+
+</CH.Code>
+
+## Available email templates
+
+There are several Auth email templates which can be configured:
+
+- `auth.email.template.invite`
+- `auth.email.template.confirmation`
+- `auth.email.template.recovery`
+- `auth.email.template.magic_link`
+- `auth.email.template.email_change`
+
+## Template variables
+
+The templating system provides the following variables for use:
+
+### ConfirmationURL
+
+Contains the confirmation URL. For example, a signup confirmation URL would look like:
+
+```
+https://project-ref.supabase.co/auth/v1/verify?token={{ .TokenHash }}&type=signup&redirect_to=https://example.com/path
+```
+
+**Usage**
+
+```html
+<p>Click here to confirm: {{ .ConfirmationURL }}</p>
+```
+
+### Token
+
+Contains a 6-digit One-Time-Password (OTP) that can be used instead of the `ConfirmationURL`.
+
+**Usage**
+
+```html
+<p>Here is your one time password: {{ .Token }}</p>
+```
+
+### TokenHash
+
+Contains a hashed version of the `Token`. This is useful for constructing your own email link in the email template.
+
+**Usage**
+
+```html
+<p>Follow this link to confirm your user:</p>
+<p>
+  <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email"
+    >Confirm your email</a
+  >
+</p>
+```
+
+### SiteURL
+
+Contains your application's Site URL. This can be configured in your project's [authentication settings](/dashboard/project/_/auth/url-configuration).
+
+**Usage**
+
+```html
+<p>Visit <a href="{{ .SiteURL }}">here</a> to log in.</p>
+```
+
+### Email
+
+Contains the user's email address.
+
+**Usage**
+
+```html
+<p>A recovery request was sent to {{ .Email }}.</p>
+```
+
+### NewEmail
+
+Contains the new user's email address. This is only available in the `email_change` email template.
+
+**Usage**
+
+```html
+<p>You are requesting to update your email address to {{ .NewEmail }}.</p>
+```
+
+## Deploying email templates
+
+These settings are only for local development. To update your hosted project, please copy the templates into the [Email Templates](/dashboard/project/_/auth/templates) section of the Dashboard.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page

apps/docs/pages/guides/cli/managing-config.mdx

@@ -12,7 +12,7 @@ The Supabase CLI uses a `config.toml` file to manage local configuration. This f
 
 The `config.toml` file is automatically created when you run `supabase start`.
 
-There are a wide variety of options available, which can be found in the [CLI Config Reference](/docs/reference/cli/config).
+There are a wide variety of options available, which can be found in the [CLI Config Reference](/docs/guides/cli/config).
 
 For example, to enable the "Apple" OAuth provider for local development, you can append the following information to `config.toml`:
 

apps/docs/pages/guides/functions/cicd-workflow.mdx

@@ -38,7 +38,7 @@ jobs:
 
 Since Supabase CLI [v1.62.0](https://github.com/supabase/cli/releases/tag/v1.62.0) you can deploy all functions with a single command.
 
-Individual function configuration like [JWT verification](/docs/reference/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/reference/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
+Individual function configuration like [JWT verification](/docs/guides/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/guides/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
 
 ```toml
 [functions.hello-world]

apps/docs/pages/guides/functions/examples/github-actions.mdx

@@ -47,7 +47,7 @@ jobs:
 
 Since Supabase CLI [v1.62.0](https://github.com/supabase/cli/releases/tag/v1.62.0) you can deploy all functions with a single command.
 
-Individual function configuration like [JWT verification](/docs/reference/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/reference/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
+Individual function configuration like [JWT verification](/docs/guides/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/guides/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
 
 ```toml
 [functions.hello-world]

apps/docs/pages/guides/functions/quickstart.mdx

@@ -66,7 +66,7 @@ supabase functions deploy
 
 Since Supabase CLI [v1.62.0](https://github.com/supabase/cli/releases/tag/v1.62.0) you can deploy all functions with a single command. This is useful for example when [deploying with GitHub Actions](/docs/guides/functions/cicd-workflow).
 
-Individual function configuration like [JWT verification](/docs/reference/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/reference/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
+Individual function configuration like [JWT verification](/docs/guides/cli/config#functions.function_name.verify_jwt) and [import map location](/docs/guides/cli/config#functions.function_name.import_map) can be set via the `config.toml` file.
 
 ```toml
 [functions.hello-world]

spec/cli_v1_config.yaml

@@ -260,6 +260,38 @@ parameters:
     links:
       - name: 'Auth Server configuration'
         link: 'https://supabase.com/docs/reference/auth'
+  
+  - id: 'auth.email.template.type.subject'
+    title: 'auth.email.template.<type>.subject'
+    tags: ['auth']
+    required: false
+    description: |
+      The full list of email template types are:
+
+      - `invite`
+      - `confirmation`
+      - `recovery`
+      - `magic_link`
+      - `email_change`
+    links:
+      - name: 'Auth Server configuration'
+        link: 'https://supabase.com/docs/reference/auth'
+  
+  - id: 'auth.email.template.type.content_path'
+    title: 'auth.email.template.<type>.content_path'
+    tags: ['auth']
+    required: false
+    description: |
+      The full list of email template types are:
+
+      - `invite`
+      - `confirmation`
+      - `recovery`
+      - `magic_link`
+      - `email_change`
+    links:
+      - name: 'Auth Server configuration'
+        link: 'https://supabase.com/docs/reference/auth'
 
   - id: 'auth.external.provider.enabled'
     title: 'auth.external.<provider>.enabled'