mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-24 03:21:20 -05:00
Piyush Gupta
26591d9b9f
Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com> Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
319 lines
21 KiB
Plaintext
319 lines
21 KiB
Plaintext
import { MdxImage } from "@/components/MdxImage";
|
||
|
||
import EntraIDAppReg01 from "./images/entra_app_reg_01.webp";
|
||
import EntraIDAppReg02 from "./images/entra_app_reg_02.webp";
|
||
import EntraIDAppReg03 from "./images/entra_app_reg_03.webp";
|
||
import EntraIDAppReg04 from "./images/entra_app_reg_04.webp";
|
||
import EntraIDAppReg05 from "./images/entra_app_reg_05.webp";
|
||
import EntraIDAppReg06 from "./images/entra_app_reg_06.webp";
|
||
import EntraIDAppReg07 from "./images/entra_app_reg_07.webp";
|
||
import EntraIDAppReg08 from "./images/entra_app_reg_08.webp";
|
||
import EntraIDAppReg09 from "./images/entra_app_reg_09.webp";
|
||
import EntraIDAppReg10 from "./images/entra_app_reg_10.webp";
|
||
|
||
export const metadata = {
|
||
title: "Configure Formbricks with External auth providers",
|
||
description:
|
||
"Set up and integrate multiple external authentication providers with Formbricks. Our step-by-step guide covers Google OAuth and more, ensuring a seamless login experience for your users.",
|
||
};
|
||
|
||
#### Self-Hosting
|
||
|
||
# Configure
|
||
|
||
### Custom Configurations
|
||
|
||
These variables are present inside your machine’s docker-compose file. Restart the docker containers if you change any variables for them to take effect.
|
||
|
||
| Variable | Description | Required | Default |
|
||
| ---------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------- |
|
||
| WEBAPP_URL | Base URL of the site. | required | http://localhost:3000 |
|
||
| NEXTAUTH_URL | Location of the auth server. This should normally be the same as WEBAPP_URL | required | http://localhost:3000 |
|
||
| DATABASE_URL | Database URL with credentials. | required | |
|
||
| NEXTAUTH_SECRET | Secret for NextAuth, used for session signing and encryption. | required | (Generated by the user) |
|
||
| ENCRYPTION_KEY | Secret for used by Formbricks for data encryption | required | (Generated by the user) |
|
||
| CRON_SECRET | API Secret for running cron jobs. | required | |
|
||
| UPLOADS_DIR | Local directory for storing uploads. | optional | ./uploads |
|
||
| S3_ACCESS_KEY | Access key for S3. | optional | (resolved by the AWS SDK) |
|
||
| S3_SECRET_KEY | Secret key for S3. | optional | (resolved by the AWS SDK) |
|
||
| S3_REGION | Region for S3. | optional | (resolved by the AWS SDK) |
|
||
| S3_BUCKET_NAME | S3 bucket name for data storage. Formbricks enables S3 storage when this is set. | optional (required if S3 is enabled) | |
|
||
| S3_ENDPOINT_URL | Endpoint for S3. | optional | (resolved by the AWS SDK) |
|
||
| PRIVACY_URL | URL for privacy policy. | optional | |
|
||
| TERMS_URL | URL for terms of service. | optional | |
|
||
| IMPRINT_URL | URL for imprint. | optional | |
|
||
| EMAIL_AUTH_DISABLED | Disables the ability for users to signup or login via email and password if set to 1. | optional | |
|
||
| PASSWORD_RESET_DISABLED | Disables password reset functionality if set to 1. | optional | |
|
||
| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to 1. | optional | |
|
||
| RATE_LIMITING_DISABLED | Disables rate limiting if set to 1. | optional | |
|
||
| INVITE_DISABLED | Disables the ability for invited users to create an account if set to 1. | optional | |
|
||
| MAIL_FROM | Email address to send emails from. | optional (required if email services are to be enabled) | |
|
||
| SMTP_HOST | Host URL of your SMTP server. | optional (required if email services are to be enabled) | |
|
||
| SMTP_PORT | Host Port of your SMTP server. | optional (required if email services are to be enabled) | |
|
||
| SMTP_USER | Username for your SMTP Server. | optional (required if email services are to be enabled) | |
|
||
| SMTP_PASSWORD | Password for your SMTP Server. | optional (required if email services are to be enabled) | |
|
||
| SMTP_SECURE_ENABLED | SMTP secure connection. For using TLS, set to 1 else to 0. | optional (required if email services are to be enabled) | |
|
||
| SMTP_REJECT_UNAUTHORIZED_TLS | If set to 0, the server will accept connections without requiring authorization from the list of supplied CAs. | optional | 1 |
|
||
| GITHUB_ID | Client ID for GitHub. | optional (required if GitHub auth is enabled) | |
|
||
| GITHUB_SECRET | Secret for GitHub. | optional (required if GitHub auth is enabled) | |
|
||
| GOOGLE_CLIENT_ID | Client ID for Google. | optional (required if Google auth is enabled) | |
|
||
| GOOGLE_CLIENT_SECRET | Secret for Google. | optional (required if Google auth is enabled) | |
|
||
| STRIPE_SECRET_KEY | Secret key for Stripe integration. | optional | |
|
||
| STRIPE_WEBHOOK_SECRET | Webhook secret for Stripe integration. | optional | |
|
||
| TELEMETRY_DISABLED | Disables telemetry if set to 1. | optional | |
|
||
| DEFAULT_BRAND_COLOR | Default brand color for your app (Can be overwritten from the UI as well). | optional | #64748b |
|
||
| DEFAULT_ORGANIZATION_ID | Automatically assign new users to a specific organization when joining | optional | |
|
||
| DEFAULT_ORGANIZATION_ROLE | Role of the user in the default organization. | optional | admin |
|
||
| OIDC_DISPLAY_NAME | Display name for Custom OpenID Connect Provider | optional | |
|
||
| OIDC_CLIENT_ID | Client ID for Custom OpenID Connect Provider | optional (required if OIDC auth is enabled) | |
|
||
| OIDC_CLIENT_SECRET | Secret for Custom OpenID Connect Provider | optional (required if OIDC auth is enabled) | |
|
||
| OIDC_ISSUER | Issuer URL for Custom OpenID Connect Provider (should have .well-known configured at this) | optional (required if OIDC auth is enabled) | |
|
||
| OIDC_SIGNING_ALGORITHM | Signing Algorithm for Custom OpenID Connect Provider | optional | RS256 |
|
||
| OPENTELEMETRY_LISTENER_URL | URL for OpenTelemetry listener inside Formbricks. | optional | |
|
||
| CUSTOM_CACHE_DISABLED | Disables custom cache handler if set to 1 (required for deployment on Vercel) | optional | |
|
||
| `<add more>` | | | |
|
||
| | | | |
|
||
|
||
Note: If you want to configure something that is not possible via above, please open an issue on our GitHub repo here or reach out to us on Discord and we’ll try our best to work out a solution with you.
|
||
|
||
## OAuth Configuration
|
||
|
||
### Google OAuth
|
||
|
||
Integrating Google OAuth with your Formbricks instance allows users to log in using their Google credentials, ensuring a secure and streamlined user experience. This guide will walk you through the process of setting up Google OAuth for your Formbricks instance.
|
||
|
||
#### Requirements:
|
||
|
||
- A Google Cloud Platform (GCP) account.
|
||
- A Formbricks instance running and accessible.
|
||
|
||
#### Steps:
|
||
|
||
1. **Create a GCP Project**:
|
||
|
||
- Navigate to the [GCP Console](https://console.cloud.google.com/).
|
||
- From the projects list, select a project or create a new one.
|
||
|
||
2. **Setting up OAuth 2.0**:
|
||
|
||
- If the **APIs & services** page isn't already open, open the console left side menu and select **APIs & services**.
|
||
- On the left, click **Credentials**.
|
||
- Click **Create Credentials**, then select **OAuth client ID**.
|
||
|
||
3. **Configure OAuth Consent Screen**:
|
||
|
||
- If this is your first time creating a client ID, configure your consent screen by clicking **Consent Screen**.
|
||
- Fill in the necessary details and under **Authorized domains**, add the domain where your Formbricks instance is hosted.
|
||
|
||
4. **Create OAuth 2.0 Client IDs**:
|
||
- Select the application type **Web application** for your project and enter any additional information required.
|
||
- Ensure to specify authorized JavaScript origins and authorized redirect URIs.
|
||
|
||
<Col>
|
||
<CodeGroup title="Configuration URLs">
|
||
``` {{ title: "Redirect & Origin URLs" }}
|
||
Authorized JavaScript origins: {WEBAPP_URL}
|
||
Authorized redirect URIs: {WEBAPP_URL}/api/auth/callback/google ```
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
5. **Update Environment Variables in Docker**:
|
||
- To integrate the Google OAuth, you have two options: either update the environment variables in the docker-compose file or directly add them to the running container.
|
||
- In your Docker setup directory, open the `.env` file, and add or update the following lines with the `Client ID` and `Client Secret` obtained from Google Cloud Platform:
|
||
- Alternatively, you can add the environment variables directly to the running container using the following commands (replace `container_id` with your actual Docker container ID):
|
||
|
||
<Col>
|
||
<CodeGroup title="Set env vars">
|
||
|
||
```sh {{ title: 'Shell commands' }}
|
||
docker exec -it container_id /bin/bash
|
||
export GOOGLE_CLIENT_ID=your-client-id-here
|
||
export GOOGLE_CLIENT_SECRET=your-client-secret-here
|
||
exit
|
||
```
|
||
|
||
```sh {{ title: 'env file' }}
|
||
GOOGLE_CLIENT_ID=your-client-id-here
|
||
GOOGLE_CLIENT_SECRET=your-client-secret-here
|
||
```
|
||
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
6. **Restart Your Formbricks Instance**:
|
||
- **Note:** Restarting your Docker containers may cause a brief period of downtime. Plan accordingly.
|
||
- Once the environment variables have been updated, it's crucial to restart your Docker containers to apply the changes. This ensures that your Formbricks instance can utilize the new Google OAuth configuration for user authentication. Here's how you can do it:
|
||
- Navigate to your Docker setup directory where your `docker-compose.yml` file is located.
|
||
- Run the following command to bring down your current Docker containers and then bring them back up with the updated environment configuration:
|
||
|
||
### Microsoft Entra ID (Azure Active Directory) SSO OAuth
|
||
|
||
Do you have a Microsoft Entra ID Tenant? Integrate it with your Formbricks instance to allow users to log in using their existing Microsoft credentials. This guide will walk you through the process of setting up an Application Registration for your Formbricks instance.
|
||
|
||
#### Requirements
|
||
|
||
- A Microsoft Entra ID Tenant populated with users. [Create a tenant as per Microsoft's documentation](https://learn.microsoft.com/en-us/entra/fundamentals/create-new-tenant).
|
||
- A Formbricks instance running and accessible.
|
||
- The callback URI for your Formbricks instance: `{WEBAPP_URL}/api/auth/callback/azure-ad`
|
||
|
||
#### Creating an App Registration
|
||
|
||
1. Login to the [Microsoft Entra admin center](https://entra.microsoft.com/).
|
||
2. Go to **Applications** > **App registrations** in the left menu.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg01}
|
||
alt="App Registration Name Field"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
3. Click the **New registration** button at the top.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg02}
|
||
alt="App Registration Name Field"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
4. Name your application something descriptive, such as `Formbricks SSO`.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg03}
|
||
alt="App Registration Name Field"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
5. If you have multiple tenants/organizations, choose the appropriate **Supported account types** option. Otherwise, leave the default option for _Single Tenant_.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg04}
|
||
alt="Supported Account Types List"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
6. Under **Redirect URI**, select **Web** for the platform and paste your Formbricks callback URI (see Requirements above).
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg05}
|
||
alt="Redirect URI Field"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
7. Click **Register** to create the App registration. You will be redirected to your new app's _Overview_ page after it is created.
|
||
|
||
8. On the _Overview_ page, under **Essentials**:
|
||
- Copy the entry for **Application (client) ID** to populate the `AZUREAD_CLIENT_ID` variable.
|
||
- Copy the entry for **Directory (tenant) ID** to populate the `AZUREAD_TENANT_ID` variable.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg06}
|
||
alt="Client and Tenant ID Fields"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
9. From your App registration's _Overview_ page, go to **Manage** > **Certificates & secrets**.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg07}
|
||
alt="Certificates & secrets link"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
10. Make sure you have the **Client secrets** tab active, and click **New client secret**.
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg08}
|
||
alt="New Client Secret Tab & Button"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
11. Enter a **Description**, set an **Expires** period, then click **Add**.
|
||
|
||
<Note>
|
||
You will need to create a new client secret using these steps whenever your chosen expiry period ends.
|
||
</Note>
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg09}
|
||
alt="Description & Expires Fields"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
12. Copy the entry under **Value** to populate the `AZUREAD_CLIENT_SECRET` variable.
|
||
|
||
<Note>
|
||
Microsoft will only show this value to you immediately after creation, and you will not be able to access it again. If you lose it, simply start from step 9 to create a new secret.
|
||
</Note>
|
||
|
||
<MdxImage
|
||
src={EntraIDAppReg10}
|
||
alt="Client Secret Value Field"
|
||
quality="100"
|
||
className="max-w-full rounded-lg sm:max-w-3xl"
|
||
/>
|
||
|
||
13. Update these environment variables in your `docker-compose.yml` or pass it like your other environment variables to the Formbricks container.
|
||
|
||
<Note>
|
||
You must wrap the `AZUREAD_CLIENT_SECRET` value in double quotes (e.g., `"THis~iS4faKe.53CreTvALu3"`) to prevent issues with special characters.
|
||
</Note>
|
||
|
||
An example `.env` for Microsoft Entra ID in Formbricks would look like:
|
||
|
||
<Col>
|
||
<CodeGroup title="Formbricks Env for Microsoft Entra ID SSO">
|
||
```yml {{ title: ".env" }}
|
||
AZUREAD_CLIENT_ID=a25cadbd-f049-4690-ada3-56a163a72f4c
|
||
AZUREAD_TENANT_ID=2746c29a-a3a6-4ea1-8762-37816d4b7885
|
||
AZUREAD_CLIENT_SECRET="THis~iS4faKe.53CreTvALu3"
|
||
```
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
14. Restart your Formbricks instance.
|
||
15. You're all set! Users can now sign up & log in using their Microsoft credentials associated with your Entra ID Tenant.
|
||
|
||
## OpenID Configuration
|
||
|
||
Integrating your own OIDC (OpenID Connect) instance with your Formbricks instance allows users to log in using their OIDC credentials, ensuring a secure and streamlined user experience. Please follow the steps below to set up OIDC for your Formbricks instance.
|
||
|
||
1. Configure your OIDC provider & get the following variables:
|
||
- `OIDC_CLIENT_ID`
|
||
- `OIDC_CLIENT_SECRET`
|
||
- `OIDC_ISSUER`
|
||
- `OIDC_SIGNING_ALGORITHM`
|
||
|
||
<Note>
|
||
Make sure the Redirect URI for your OIDC Client is set to `{WEBAPP_URL}/api/auth/callback/openid`.
|
||
</Note>
|
||
|
||
2. Update these environment variables in your `docker-compose.yml` or pass it directly to the running container.
|
||
|
||
An example configuration for a FusionAuth OpenID Connect in Formbricks would look like:
|
||
|
||
<Col>
|
||
<CodeGroup title="Formbricks Env for FusionAuth OIDC">
|
||
```yml {{ title: ".env" }}
|
||
OIDC_CLIENT_ID=59cada54-56d4-4aa8-a5e7-5823bbe0e5b7
|
||
OIDC_CLIENT_SECRET=4f4dwP0ZoOAqMW8fM9290A7uIS3E8Xg29xe1umhlB_s
|
||
OIDC_ISSUER=http://localhost:9011
|
||
OIDC_DISPLAY_NAME=FusionAuth OIDC_SIGNING_ALGORITHM=HS256
|
||
```
|
||
</CodeGroup>
|
||
</Col>
|
||
|
||
3. Set an environment variable `OIDC_DISPLAY_NAME` to the display name of your OIDC provider.
|
||
|
||
4. Restart your Formbricks instance.
|
||
|
||
5. You're all set! Users can now signup & log in using their OIDC credentials.
|