Merge remote-tracking branch 'origin' into secret-versioning

.env.example

@@ -1,13 +1,13 @@
 # Keys
 # Required key for platform encryption/decryption ops
-ENCRYPTION_KEY=replace_with_lengthy_secure_hex
+ENCRYPTION_KEY=6c1fe4e407b8911c104518103505b218
 
 # JWT
 # Required secrets to sign JWT tokens
-JWT_SIGNUP_SECRET=replace_with_lengthy_secure_hex
+JWT_SIGNUP_SECRET=3679e04ca949f914c03332aaaeba805a
-JWT_REFRESH_SECRET=replace_with_lengthy_secure_hex
+JWT_REFRESH_SECRET=5f2f3c8f0159068dc2bbb3a652a716ff
-JWT_AUTH_SECRET=replace_with_lengthy_secure_hex
+JWT_AUTH_SECRET=4be6ba5602e0fa0ac6ac05c3cd4d247f
-JWT_SERVICE_SECRET=replace_with_lengthy_secure_hex
+JWT_SERVICE_SECRET=f32f716d70a42c5703f4656015e76200
 
 # JWT lifetime
 # Optional lifetimes for JWT tokens expressed in seconds or a string 
@@ -34,15 +34,12 @@ MONGO_PASSWORD=example
 SITE_URL=http://localhost:8080
 
 # Mail/SMTP
-# Required to send emails
+SMTP_HOST= # required
-# By default, SMTP_HOST is set to smtp.gmail.com, SMTP_PORT is set to 587, SMTP_TLS is set to false, and SMTP_FROM_NAME is set to Infisical
+SMTP_USERNAME= # required
-SMTP_HOST=smtp.gmail.com
+SMTP_PASSWORD= # required
-# If STARTTLS is supported, the connection will be upgraded to TLS when SMTP_SECURE is set to false
-SMTP_SECURE=false
 SMTP_PORT=587
-SMTP_USERNAME=
+SMTP_SECURE=false
-SMTP_PASSWORD=
+SMTP_FROM_ADDRESS= # required
-SMTP_FROM_ADDRESS=
 SMTP_FROM_NAME=Infisical
 
 # Integration

README.md

@@ -321,4 +321,4 @@ Infisical officially launched as v.1.0 on November 21st, 2022. However, a lot of
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 
-<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gmgale"><img src="https://avatars.githubusercontent.com/u/62303146?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/edgarrmondragon"><img src="https://avatars.githubusercontent.com/u/16805946?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arjunyel"><img src="https://avatars.githubusercontent.com/u/11153289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/LemmyMwaura"><img src="https://avatars.githubusercontent.com/u/20738858?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/Zamion101"><img src="https://avatars.githubusercontent.com/u/8071263?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/jonerrr"><img src="https://avatars.githubusercontent.com/u/73760377?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/adrianmarinwork"><img src="https://avatars.githubusercontent.com/u/118568289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arthurzenika"><img src="https://avatars.githubusercontent.com/u/445200?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/wanjohiryan"><img src="https://avatars.githubusercontent.com/u/71614375?v=4" width="50" height="50" alt=""/></a>
+<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/reginaldbondoc"><img src="https://avatars.githubusercontent.com/u/7693108?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/SH5H"><img src="https://avatars.githubusercontent.com/u/25437192?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gmgale"><img src="https://avatars.githubusercontent.com/u/62303146?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/asharonbaltazar"><img src="https://avatars.githubusercontent.com/u/58940073?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/edgarrmondragon"><img src="https://avatars.githubusercontent.com/u/16805946?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arjunyel"><img src="https://avatars.githubusercontent.com/u/11153289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/LemmyMwaura"><img src="https://avatars.githubusercontent.com/u/20738858?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/Zamion101"><img src="https://avatars.githubusercontent.com/u/8071263?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/naorpeled"><img src="https://avatars.githubusercontent.com/u/6171622?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/jonerrr"><img src="https://avatars.githubusercontent.com/u/73760377?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/adrianmarinwork"><img src="https://avatars.githubusercontent.com/u/118568289?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/arthurzenika"><img src="https://avatars.githubusercontent.com/u/445200?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/wjhurley"><img src="https://avatars.githubusercontent.com/u/15939055?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/wanjohiryan"><img src="https://avatars.githubusercontent.com/u/71614375?v=4" width="50" height="50" alt=""/></a>

backend/package-lock.json

@@ -31,7 +31,7 @@
         "libsodium-wrappers": "^0.7.10",
         "mongoose": "^6.7.2",
         "nodemailer": "^6.8.0",
-        "posthog-node": "^2.2.0",
+        "posthog-node": "^2.2.2",
         "query-string": "^7.1.3",
         "rimraf": "^3.0.2",
         "stripe": "^10.7.0",
@@ -9810,9 +9810,9 @@
       }
     },
     "node_modules/posthog-node": {
-      "version": "2.2.0",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-2.2.2.tgz",
-      "integrity": "sha512-p5ltKQO6YvBNy09OmpJvcknvxBAs8MvHv1AGbXGWDdnGCwKZxa9Ln2cN5XHnzU7rYuNT7YMAVQzZ6cE7Mu1yPA==",
+      "integrity": "sha512-aXYe/D+28kF63W8Cz53t09ypEORz+ULeDCahdAqhVrRm2scbOXFbtnn0GGhvMpYe45grepLKuwui9KxrZ2ZuMw==",
       "dependencies": {
         "axios": "^0.27.0"
       },
@@ -18752,9 +18752,9 @@
       }
     },
     "posthog-node": {
-      "version": "2.2.0",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-2.2.2.tgz",
-      "integrity": "sha512-p5ltKQO6YvBNy09OmpJvcknvxBAs8MvHv1AGbXGWDdnGCwKZxa9Ln2cN5XHnzU7rYuNT7YMAVQzZ6cE7Mu1yPA==",
+      "integrity": "sha512-aXYe/D+28kF63W8Cz53t09ypEORz+ULeDCahdAqhVrRm2scbOXFbtnn0GGhvMpYe45grepLKuwui9KxrZ2ZuMw==",
       "requires": {
         "axios": "^0.27.0"
       },

backend/package.json

@@ -22,7 +22,7 @@
     "libsodium-wrappers": "^0.7.10",
     "mongoose": "^6.7.2",
     "nodemailer": "^6.8.0",
-    "posthog-node": "^2.2.0",
+    "posthog-node": "^2.2.2",
     "query-string": "^7.1.3",
     "rimraf": "^3.0.2",
     "stripe": "^10.7.0",

backend/src/config/index.ts

@@ -25,9 +25,9 @@ const POSTHOG_PROJECT_API_KEY =
   'phc_nSin8j5q2zdhpFDI1ETmFNUIuTG4DwKVyIigrY10XiE';
 const SENTRY_DSN = process.env.SENTRY_DSN!;
 const SITE_URL = process.env.SITE_URL!;
-const SMTP_HOST = process.env.SMTP_HOST! || 'smtp.gmail.com';
+const SMTP_HOST = process.env.SMTP_HOST!;
-const SMTP_SECURE = process.env.SMTP_SECURE! || false;
+const SMTP_SECURE = process.env.SMTP_SECURE! === 'true' || false;
-const SMTP_PORT = process.env.SMTP_PORT! || 587;
+const SMTP_PORT = parseInt(process.env.SMTP_PORT!) || 587;
 const SMTP_USERNAME = process.env.SMTP_USERNAME!;
 const SMTP_PASSWORD = process.env.SMTP_PASSWORD!;
 const SMTP_FROM_ADDRESS = process.env.SMTP_FROM_ADDRESS!;

backend/src/integrations/exchange.ts

@@ -9,8 +9,7 @@ import {
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_GITHUB_TOKEN_URL,
-  INTEGRATION_GITHUB_API_URL,
+  INTEGRATION_GITHUB_API_URL
-  ACTION_PUSH_TO_HEROKU
 } from '../variables';
 import {
   SITE_URL,

backend/src/services/smtp.ts

@@ -1,13 +1,14 @@
 import nodemailer from 'nodemailer';
 import { SMTP_HOST, SMTP_PORT, SMTP_USERNAME, SMTP_PASSWORD, SMTP_SECURE } from '../config';
+import { SMTP_HOST_SENDGRID, SMTP_HOST_MAILGUN } from '../variables';
 import SMTPConnection from 'nodemailer/lib/smtp-connection';
 import * as Sentry from '@sentry/node';
 
 const mailOpts: SMTPConnection.Options = {
   host: SMTP_HOST,
-  secure: SMTP_SECURE as boolean,
   port: SMTP_PORT as number
 };
+
 if (SMTP_USERNAME && SMTP_PASSWORD) {
   mailOpts.auth = {
     user: SMTP_USERNAME,
@@ -15,6 +16,23 @@ if (SMTP_USERNAME && SMTP_PASSWORD) {
   };
 }
 
+if (SMTP_SECURE) {
+  switch (SMTP_HOST) {
+    case SMTP_HOST_SENDGRID:
+      mailOpts.requireTLS = true;
+      break;
+    case SMTP_HOST_MAILGUN:
+      mailOpts.requireTLS = true; 
+      mailOpts.tls = {
+        ciphers: 'TLSv1.2'
+      }
+      break;
+    default:
+      mailOpts.secure = true;
+      break;
+  }
+}
+
 export const initSmtp = () => {
   const transporter = nodemailer.createTransport(mailOpts);
   transporter

backend/src/variables/action.ts

@@ -1,5 +0,0 @@
-const ACTION_PUSH_TO_HEROKU = 'pushToHeroku';
-
-export {
-    ACTION_PUSH_TO_HEROKU
-}

backend/src/variables/index.ts

@@ -32,9 +32,9 @@ import {
   GRANTED
 } from './organization';
 import { SECRET_SHARED, SECRET_PERSONAL } from './secret';
-import { PLAN_STARTER, PLAN_PRO } from './stripe';
 import { EVENT_PUSH_SECRETS, EVENT_PULL_SECRETS } from './event';
-import { ACTION_PUSH_TO_HEROKU } from './action';
+import { SMTP_HOST_SENDGRID, SMTP_HOST_MAILGUN } from './smtp';
+import { PLAN_STARTER, PLAN_PRO } from './stripe';
 
 export {
   OWNER,
@@ -44,8 +44,6 @@ export {
   ACCEPTED,
   COMPLETED,
   GRANTED,
-  PLAN_STARTER,
-  PLAN_PRO,
   SECRET_SHARED,
   SECRET_PERSONAL,
   ENV_DEV,
@@ -69,6 +67,9 @@ export {
   INTEGRATION_GITHUB_API_URL,
   EVENT_PUSH_SECRETS,
   EVENT_PULL_SECRETS,
-  ACTION_PUSH_TO_HEROKU,
+  INTEGRATION_OPTIONS,
-  INTEGRATION_OPTIONS
+  SMTP_HOST_SENDGRID,
+  SMTP_HOST_MAILGUN,
+  PLAN_STARTER,
+  PLAN_PRO,
 };

backend/src/variables/smtp.ts

@@ -0,0 +1,7 @@
+const SMTP_HOST_SENDGRID = 'smtp.sendgrid.net';
+const SMTP_HOST_MAILGUN = 'smtp.mailgun.org';
+
+export {
+    SMTP_HOST_SENDGRID,
+    SMTP_HOST_MAILGUN
+}

docs/contributing/FAQ.mdx

@@ -1,18 +0,0 @@
----
-title: 'Frequently Asked Questions'
-description: 'Have any questions? [Join our Slack community](https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g).'
----
-
-## Problem with SMTP
-
-If you opt for actual SMTP server (not the local MailHog), you have to have the right environment variables set.
-
-You can normally populate `SMTP_USERNAME` and `SMTP_PASSWORD` with your usual login and password (you could also create a 'burner' email). Sometimes, there still are problems.
-
-You can go to your Gmail account settings > security and enable “less secure apps”. This would allow Infisical to use your Gmail to send emails.
-
-If it still doesn't work, [this](https://stackoverflow.com/questions/72547853/unable-to-send-email-in-c-sharp-less-secure-app-access-not-longer-available/72553362#72553362) should help.
-
-## `MONGO_URL` issues
-
-Your `MONGO_URL` should be something like `mongodb://root:example@mongo:27017/?authSource=admin`. If you want to change it (not recommended), you should make sure that you keep this URL in line with `MONGO_USERNAME=root` and `MONGO_PASSWORD=example`.

docs/contributing/developing.mdx

@@ -16,53 +16,43 @@ cd infisical
 
 ## Set up environment variables
 
-Start by creating a .env file at the root of the Infisical directory 
+Start by creating a .env file at the root of the Infisical directory. It's best to start with the provided [`.env.example`](https://github.com/Infisical/infisical/blob/main/.env.example) template containing the necessary envars to fill out your .env file — you only have to modify the SMTP parameters.
+
+<Warning>
+    The pre-populated environment variable values in the `.env.example` file are meant to be used in development only.
+    You'll want to fill in your own values in production, especially concerning encryption keys, secrets, and SMTP parameters.
+</Warning>
+
+Refer to the [environment variable list](https://infisical.com/docs/self-hosting/configuration/envars) for guidance on each envar.
+
+### Helpful tips for developing with Infisical:
 
 <Tip>
-    Reference the [environment variable list](https://infisical.com/docs/self-hosting/configuration/envars) and provided [`.env.example`](https://raw.githubusercontent.com/Infisical/infisical/main/.env.example) template to fill out your .env file. 
+Use the `ENCRYPTION_KEY`, JWT-secret envars, `MONGO_URL`, `MONGO_USERNAME`, `MONGO_PASSWORD` provided in the `.env.example` file.
+
+If setting your own values: 
+
+- `ENCRYPTION_KEY` should be a [32-byte random hex](https://www.browserling.com/tools/random-hex)
+- `MONGO_URL` should take the form: `mongodb://[MONGO_USERNAME]:[MONGO_PASSWORD]@mongo:27017/?authSource=admin`.
 </Tip>
 
-### Keys
+<Tip>
+Bring and configure your own SMTP server by following our [email configuration guide](https://infisical.com/docs/self-hosting/configuration/email) (we recommend using either SendGrid or Mailgun).
 
-`ENCRYPTION_KEY`, `JWT_SIGNUP_SECRET`, `JWT_REFRESH_SECRET`, `JWT_AUTH_SECRET`, `JWT_SERVICE_SECRET` values can be generated with this [32-byte random hex generator](https://www.browserling.com/tools/random-hex).
+Alternatively, you can use the provided development (Mailhog) SMTP server to send and browse emails sent by the backend on http://localhost:8025; to use this option, set the following `SMTP_HOST`, `SMTP_PORT`, `SMTP_FROM_NAME`, `SMTP_USERNAME`, `SMTP_PASSWORD` below.
-
+</Tip>
-### Database
-
-Use to the following `MONGO_URL`, `MONGO_USERNAME`, `MONGO_PASSWORD`, `SITE_URL` values:
-
-```
-MONGO_URL=mongodb://root:example@mongo:27017/?authSource=admin
-MONGO_USERNAME=root
-MONGO_PASSWORD=example
-
-SITE_URL=http://localhost:8080
-```
-
-<Info>
-    If you decide to use your own `MONGO_USERNAME` and `MONGO_PASSWORD`, you'll have to modify `MONGO_URL` to take the form: `mongodb://[MONGO_USERNAME]:[MONGO_PASSWORD]@mongo:27017/?authSource=admin`.
-</Info>
-
-### Mailing
-
-Option 1: Bring your own SMTP server and credentials by filling in `SMTP_HOST`, `SMTP_FROM_ADDRESS`, `SMTP_FROM_NAME`, `SMTP_USERNAME`, and `SMTP_PASSWORD`.
-<Info>
-    `SMTP_HOST` is set to `smtp.gmail.com` by default. For `SMTP_USERNAME` and `SMTP_PASSWORD`, you'll need an email with 2-step-verification and an [app password](https://support.google.com/mail/answer/185833?hl=en) for it.
-</Info>
-
-
-Option 2: Use the provided (Mailhog) SMTP server and browse emails sent by the backend on `http://localhost:8025`. To use this option, set the following `SMTP_HOST`, `SMTP_PORT`, `SMTP_FROM_NAME`, `SMTP_USERNAME`, `SMTP_PASSWORD` values:
 
 ```
 SMTP_HOST=smtp-server
 SMTP_PORT=1025
 [email protected]
-SMTP_FROM_NAME=[whatever you like]
+SMTP_FROM_NAME=Infisical
 [email protected]
 SMTP_PASSWORD=
 ```
 
 <Warning>
-    Make sure to leave the `SMTP_PASSWORD` blank so the backend can connect to MailHog.
+    If using Mailhog, make sure to leave the `SMTP_PASSWORD` blank so the backend can connect to MailHog.
 </Warning>
 
 ## Docker for development

docs/mint.json

@@ -102,18 +102,21 @@
     {
       "group": "Self-hosting",
       "pages": [
-        "self-hosting/overview",
+        "self-hosting/overview"
-        {
+      ]
-          "group": "Deployments options",
+    },
-          "pages": [
+    {
-            "self-hosting/deployments/linux",
+      "group": "Deployment options",
-            "self-hosting/deployments/kubernetes"
+      "pages": [
-          ]
+        "self-hosting/deployments/linux",
-        },
+        "self-hosting/deployments/kubernetes"
-        {
+      ]
-          "group": "Configuration",
+    },
-          "pages": ["self-hosting/configuration/envars"]
+    {
-        }
+      "group": "Configuration",
+      "pages": [
+        "self-hosting/configuration/envars",
+        "self-hosting/configuration/email"
       ]
     },
     {
@@ -177,8 +180,7 @@
       "pages": [
         "contributing/overview",
         "contributing/code-of-conduct",
-        "contributing/developing",
+        "contributing/developing"
-        "contributing/FAQ"
       ]
     }
   ],

docs/self-hosting/configuration/email.mdx

@@ -0,0 +1,75 @@
+---
+title: "Email"
+description: ""
+---
+
+Infisical requires you to configure your own SMTP server for certain functionality like:
+
+- Sending email confirmation links to sign up.
+- Sending invite links for projects.
+- Sending alerts.
+
+We strongly recommend using an email service to act as your email server and provide examples for common providers.
+
+## General configuration
+
+By default, you need to configure the following SMTP [environment variables](https://infisical.com/docs/self-hosting/configuration/envars):
+
+- `SMTP_HOST`: Hostname to connect to for establishing SMTP connections.
+- `SMTP_USERNAME`: Credential to connect to host (e.g. [email protected])
+- `SMTP_PASSWORD`: Credential to connect to host.
+- `SMTP_PORT`: Port to connect to for establishing SMTP connections.
+- `SMTP_SECURE`: If `true`, the connection will use TLS when connecting to server with special configs for SendGrid and Mailgun. If `false` (the default) then TLS is used if server supports the STARTTLS extension.
+- `SMTP_FROM_ADDRESS`: Email address to be used for sending emails (e.g. [email protected]).
+- `SMTP_FROM_NAME`: Name label to be used in `From` field (e.g. Team).
+
+Below you will find details on how to configure common email providers (not in any particular order).
+
+## Twilio SendGrid
+
+1. Create an account and configure [SendGrid](https://sendgrid.com) to send emails.
+2. Create a SendGrid API Key under Settings > [API Keys](https://app.sendgrid.com/settings/api_keys)
+3. Set a name for your API Key, we recommend using "Infisical," and select the "Restricted Key" option. You will need to enable the "Mail Send" permission as shown below:
+
+![creating sendgrid api key](../../images/email-sendgrid-create-key.png)
+
+![setting sendgrid api key restriction](../../images/email-sendgrid-restrictions.png)
+
+4. With the API Key, you can now set your SMTP environment variables:
+
+```
+SMTP_HOST=smtp.sendgrid.net
+SMTP_USERNAME=apikey
+SMTP_PASSWORD=SG.rqFsfjxYPiqE1lqZTgD_lz7x8IVLx # your SendGrid API Key from step above
+SMTP_PORT=587
+SMTP_SECURE=true
+[email protected] # your email address being used to send out emails
+SMTP_FROM_NAME=Infisical
+```
+
+<Info>
+    Remember that you will need to restart Infisical for this to work properly.
+</Info>
+
+## Mailgun
+
+1. Create an account and configure [Mailgun](https://www.mailgun.com) to send emails.
+2. Obtain your Mailgun credentials in Sending > Overview > SMTP
+
+![obtain mailhog api key estriction](../../images/email-mailhog-credentials.png)
+
+3. With your Mailgun credentials, you can now set up your SMTP environment variables:
+
+```
+SMTP_HOST=smtp.mailgun.org # obtained from credentials page
+[email protected] # obtained from credentials page
+SMTP_PASSWORD=password # obtained from credentials page
+SMTP_PORT=587
+SMTP_SECURE=true
+[email protected] # your email address being used to send out emails
+SMTP_FROM_NAME=Infisical
+```
+
+<Info>
+    Remember that you will need to restart Infisical for this to work properly.
+</Info>

docs/self-hosting/configuration/envars.mdx

@@ -3,9 +3,7 @@ title: "Environment Variables"
 description: ""
 ---
 
-## The .env file
+Configuring Infisical requires setting some environment variables. There is a file called [`.env.example`](https://github.com/Infisical/infisical/blob/main/.env.example) at the root directory of our main repo that you can use to create a `.env` file before you start the server.
-
-Configuring Infisical requires setting some environment variables. There is a file called `.env.example` at the root directory of our main repo that you can use to create a `.env` before you start the server.
 
 | Variable                     | Description                                                                                                 | Default Value    |
 | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------- |
@@ -22,13 +20,13 @@ Configuring Infisical requires setting some environment variables. There is a fi
 | `MONGO_USERNAME`             | MongoDB username if using container                                                                         | `None`           |
 | `MONGO_PASSWORD`             | MongoDB password if using container                                                                         | `None`           |
 | `SITE_URL`                   | ❗️ Site URL - should be an absolute URL including the protocol (e.g. `https://app.infisical.com`)           | `None`           |
-| `SMTP_HOST`                  | Hostname to connect to for establishing SMTP connections                                                    | `smtp.gmail.com` |
+| `SMTP_HOST`                  | ❗️ Hostname to connect to for establishing SMTP connections                                                    | `None` |
-| `SMTP_SECURE`                | Use TLS when connecting to host. If false, TLS will be used if STARTTLS is supported                        | `false`          |
-| `SMTP_PORT`                  | Port to connect to for establishing SMTP connections                                                     | `587`            |
-| `SMTP_FROM_ADDRESS`          | ❗️ Email address to be used for sending emails (e.g. `[email protected]`)                                  | `None`           |
-| `SMTP_FROM_NAME`             | Name label to be used in From field (e.g. `Team`)                                                           | `Infisical`      |
 | `SMTP_USERNAME`              | ❗️ Credential to connect to host (e.g. `[email protected]`)                                                | `None`           |
 | `SMTP_PASSWORD`              | ❗️ Credential to connect to host                                                                            | `None`           |
+| `SMTP_PORT`                  | Port to connect to for establishing SMTP connections                                                     | `587`            |
+| `SMTP_SECURE`                | If true, use TLS when connecting to host. If false, TLS will be used if STARTTLS is supported                        | `false`          |
+| `SMTP_FROM_ADDRESS`          | ❗️ Email address to be used for sending emails (e.g. `[email protected]`)                                  | `None`           |
+| `SMTP_FROM_NAME`             | Name label to be used in From field (e.g. `Team`)                                                           | `Infisical`      |
 | `TELEMETRY_ENABLED`          | `true` or `false`. [More](../overview).                                                                     | `true`           |
 | `CLIENT_ID_HEROKU`           | OAuth2 client ID for Heroku integration                                                                      | `None`           |
 | `CLIENT_ID_VERCEL`           | OAuth2 client ID for Vercel integration                                                                      | `None`           |

frontend/pages/404.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Custom404() {
+  return (
+    <div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
+      <Head>
+        <title>Infisical | Page Not Found</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <div className="flex flex-col items-center justify-center text-gray-200 h-screen w-screen">
+        <p className="text-4xl mt-32">Oops, something went wrong</p>
+        <p className="mt-2 mb-1 text-lg">Think this is a mistake? Email <a className="text-primary underline underline-offset-4" href="mailto:[email protected]">team@infisical.com</a> and we`ll fix it! </p>
+        <Link href="/dashboard" className="bg-mineshaft-500 mt-8 py-2 px-4 rounded-md hover:bg-primary diration-200 hover:text-black cursor-pointer font-semibold">
+          Go to Dashboard
+        </Link>
+        <Image
+          src="/images/dragon-404.svg"
+          height={554}
+          width={942}
+          alt="google logo"
+        ></Image>
+      </div>
+    </div>
+  );
+}

frontend/pages/signup.tsx

@@ -40,8 +40,8 @@ const props = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
+    textAlign: 'center',
-  }
+  },
 } as const;
 const propsPhone = {
   inputStyle: {
@@ -56,8 +56,8 @@ const propsPhone = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
+    textAlign: 'center',
-  }
+  },
 } as const;
 
 export default function SignUp() {
@@ -81,6 +81,7 @@ export default function SignUp() {
   const router = useRouter();
   const [errorLogin, setErrorLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isResendingVerificationEmail, setIsResendingVerificationEmail] = useState(false);
   const [backupKeyError, setBackupKeyError] = useState(false);
   const [verificationToken, setVerificationToken] = useState('');
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
@@ -148,7 +149,8 @@ export default function SignUp() {
     }
   };
 
-  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the criteria.
+  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the
+  // criteria.
   const signupErrorCheck = async () => {
     setIsLoading(true);
     let errorCheck = false;
@@ -169,7 +171,7 @@ export default function SignUp() {
       setPasswordErrorLength,
       setPasswordErrorNumber,
       setPasswordErrorLowerCase,
-      currentErrorCheck: errorCheck
+      currentErrorCheck: errorCheck,
     });
 
     if (!errorCheck) {
@@ -186,8 +188,8 @@ export default function SignUp() {
           .slice(0, 32)
           .padStart(
             32 + (password.slice(0, 32).length - new Blob([password]).size),
-            '0'
+            '0',
-          )
+          ),
       }) as { ciphertext: string; iv: string; tag: string };
 
       localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
@@ -195,7 +197,7 @@ export default function SignUp() {
       client.init(
         {
           username: email,
-          password: password
+          password: password,
         },
         async () => {
           client.createVerifier(
@@ -204,14 +206,14 @@ export default function SignUp() {
                 email,
                 firstName,
                 lastName,
-                organizationName: firstName + "'s organization",
+                organizationName: firstName + '\'s organization',
                 publicKey: PUBLIC_KEY,
                 ciphertext,
                 iv,
                 tag,
                 salt: result.salt,
                 verifier: result.verifier,
-                token: verificationToken
+                token: verificationToken,
               });
 
               // if everything works, go the main dashboard page.
@@ -230,27 +232,37 @@ export default function SignUp() {
                     setErrorLogin,
                     router,
                     true,
-                    false
+                    false,
                   );
                   incrementStep();
                 } catch (error) {
                   setIsLoading(false);
                 }
               }
-            }
+            },
           );
-        }
+        },
       );
     } else {
       setIsLoading(false);
     }
   };
 
+  const resendVerificationEmail = async () => {
+    setIsResendingVerificationEmail(true);
+    setIsLoading(true);
+    await sendVerificationEmail(email);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsResendingVerificationEmail(false);
+    }, 2000);
+  };
+
   // Step 1 of the sign up process (enter the email or choose google authentication)
   const step1 = (
     <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
       <p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {"Let'"}s get started
+        {'Let\''}s get started
       </p>
       <div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
         <Link href="/login">
@@ -284,7 +296,7 @@ export default function SignUp() {
           acknowledged the Privacy Policy.
         </p>
         <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
-          <Button text="Get Started" onButtonPressed={emailCheck} size="lg" />
+          <Button loading={isLoading} text="Get Started" onButtonPressed={emailCheck} size="lg" />
         </div>
       </div>
     </div>
@@ -294,7 +306,7 @@ export default function SignUp() {
   const step2 = (
     <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
       <p className="text-l flex justify-center text-gray-400">
-        {"We've"} sent a verification email to{' '}
+        {'We\'ve'} sent a verification email to{' '}
       </p>
       <p className="text-l flex justify-center font-semibold my-2 text-gray-400">
         {email}{' '}
@@ -328,13 +340,16 @@ export default function SignUp() {
         <Button text="Verify" onButtonPressed={incrementStep} size="lg" />
       </div>
       <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
-        {/* <Link href="/login">
+        <div className="flex flex-row items-baseline gap-1">
-          <button className="w-full hover:opacity-90 duration-200">
+          <span className="text-gray-400">
-            <u className="font-normal text-sm text-sky-700">
+            Not seeing an email?
-              Not seeing an email? Resend
+          </span>
-            </u>
+          <u className={`font-normal text-sm ${isResendingVerificationEmail ? 'text-gray-400' : 'text-sky-500 hover:opacity-90 duration-200'}`}>
-          </button>
+            <button disabled={isLoading} onClick={resendVerificationEmail}>
-        </Link> */}
+              {isResendingVerificationEmail ? 'Resending...' : 'Resend'}
+            </button>
+          </u>
+        </div>
         <p className="text-sm text-gray-500 pb-2">
           Make sure to check your spam inbox.
         </p>
@@ -382,7 +397,7 @@ export default function SignUp() {
               setPasswordErrorLength,
               setPasswordErrorNumber,
               setPasswordErrorLowerCase,
-              currentErrorCheck: false
+              currentErrorCheck: false,
             });
           }}
           type="password"
@@ -506,7 +521,7 @@ export default function SignUp() {
               password,
               personalName: firstName + ' ' + lastName,
               setBackupKeyError,
-              setBackupKeyIssued
+              setBackupKeyIssued,
             });
             const userWorkspaces = await getWorkspaces();
             const userWorkspace = userWorkspaces[0]._id;