blsmedia/bot
2
0
Fork 0
Code Activity

docs: 📝 Improve configuration doc

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-12 14:58:55 -05:00
parent df3e92685e
commit 18319c88c8
6 changed files with 155 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/builder/.env.local.example
View File

@@ -3,6 +3,9 @@ ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be gene
NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_VIEWER_URL=http://localhost:3001 NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
NEXT_PUBLIC_GITHUB_CLIENT_ID=534b549dd17709a743a2
GITHUB_CLIENT_SECRET=7adb03507504fb1a54422f6c3c697277cfd000a9
S3_ACCESS_KEY=minio S3_ACCESS_KEY=minio
S3_SECRET_KEY=minio123 S3_SECRET_KEY=minio123
S3_BUCKET=typebot S3_BUCKET=typebot

24
apps/builder/components/auth/SignInForm.tsx
View File

@@ -5,6 +5,7 @@ import {
Stack, Stack,
HStack, HStack,
useToast, useToast,
Text,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import React, { ChangeEvent, FormEvent, useEffect } from 'react' import React, { ChangeEvent, FormEvent, useEffect } from 'react'
import { useState } from 'react' import { useState } from 'react'
@@ -12,6 +13,14 @@ import { signIn, useSession } from 'next-auth/react'
import { DividerWithText } from './DividerWithText' import { DividerWithText } from './DividerWithText'
import { SocialLoginButtons } from './SocialLoginButtons' import { SocialLoginButtons } from './SocialLoginButtons'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
const hasNoAuthProvider =
(!process.env.NEXT_PUBLIC_SMTP_FROM ||
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED === 'true') &&
process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID &&
process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID &&
process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID
type Props = { type Props = {
defaultEmail?: string defaultEmail?: string
@@ -49,6 +58,21 @@ export const SignInForm = ({
}) })
setAuthLoading(false) setAuthLoading(false)
} }
if (hasNoAuthProvider)
return (
<Text>
You need to{' '}
<NextChakraLink
href="https://docs.typebot.io/self-hosting/configuration"
isExternal
color="blue.400"
textDecor="underline"
>
configure at least one auth provider
</NextChakraLink>{' '}
(Email, Google, GitHub or Facebook).
</Text>
)
return ( return (
<Stack spacing="4" w="330px"> <Stack spacing="4" w="330px">
<SocialLoginButtons /> <SocialLoginButtons />

20
apps/builder/components/auth/SocialLoginButtons.tsx
View File

@@ -27,15 +27,17 @@ export const SocialLoginButtons = () => {
return ( return (
<Stack> <Stack>
<Button {process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID && (
leftIcon={<GithubIcon />} <Button
onClick={handleGitHubClick} leftIcon={<GithubIcon />}
data-testid="github" onClick={handleGitHubClick}
isLoading={['loading', 'authenticated'].includes(status)} data-testid="github"
variant="outline" isLoading={['loading', 'authenticated'].includes(status)}
> variant="outline"
Continue with GitHub >
</Button> Continue with GitHub
</Button>
)}
{process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID && ( {process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID && (
<Button <Button
leftIcon={<GoogleLogo />} leftIcon={<GoogleLogo />}

16
apps/builder/pages/api/auth/[...nextauth].ts
View File

@@ -12,15 +12,13 @@ import { User } from 'db'
const providers: Provider[] = [] const providers: Provider[] = []
providers.push( if (process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID)
GitHubProvider({ providers.push(
clientId: GitHubProvider({
process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID ?? '534b549dd17709a743a2', clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID,
clientSecret: clientSecret: process.env.GITHUB_CLIENT_SECRET,
process.env.GITHUB_CLIENT_SECRET ?? })
'7adb03507504fb1a54422f6c3c697277cfd000a9', )
})
)
if ( if (
process.env.NEXT_PUBLIC_SMTP_FROM && process.env.NEXT_PUBLIC_SMTP_FROM &&

140
apps/docs/docs/self-hosting/configuration.md
View File

@@ -10,36 +10,45 @@ The easiest way to get started with Typebot is with [the official managed servic
That's also the best way to support my work, open-source software, and you'll get great service! That's also the best way to support my work, open-source software, and you'll get great service!
::: :::
When running a Typebot on your machine, the following configuration parameters can be supplied as environment variables. When running Typebot on your machine, the following configuration parameters can be supplied as environment variables.
## Builder & Viewer Typebot is composed of 2 main applications:
The following variables are shared between builder and viewer. If you host them in a different environment then it needs to be set in both environments. - The builder, where you build your typebots
- The viewer, where your user answer the typebot
### Global Both apps have their own environment config files. Here is an exhaustive list of all the parameters you can set:
| Parameter | Default | Description | ## Builder
| ---------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| DATABASE_URL | -- | The database URL, i.e. for external db server `postgres://user:password@ip.or.domain.to.server/database_name` |
| ENCRYPTION_SECRET | SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 | A 256-bit key used to encrypt sensitive data. It is strongly recommended to [generate](https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx) a new one. |
| ADMIN_EMAIL | -- | The email that will get a "Pro" plan on user creation |
| NEXTAUTH_URL | http://localhost:3000 | The builder base URL. Should be the publicly accessible URL (i.e. `https://app.typebot.io`) |
| NEXTAUTH_URL_INTERNAL | -- | The internal builder base URL. You have to set it only when `NEXTAUTH_URL` isn't publicly accessible |
| NEXT_PUBLIC_VIEWER_URL | http://localhost:3001 | The viewer base URL. Should be the publicly accessible URL (i.e. `https://typebot.io`) |
### SMTP (optional) | Parameter | Default | Description |
| ---------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| DATABASE_URL | postgresql://postgres:typebot@db:5432/typebot | The database URL |
| ENCRYPTION_SECRET | SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 | A 256-bit key used to encrypt sensitive data. It is strongly recommended to [generate](https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx) a new one. The secret should be the same between builder and viewer. |
| ADMIN_EMAIL | -- | The email that will get a "Pro" plan on user creation |
| NEXTAUTH_URL | http://localhost:3000 | The builder base URL. Should be the publicly accessible URL (i.e. `https://app.typebot.io`) |
| NEXT_PUBLIC_VIEWER_URL | http://localhost:3001 | The viewer base URL. Should be the publicly accessible URL (i.e. `https://typebot.io`) |
| NEXTAUTH_URL_INTERNAL | -- | The internal builder base URL. You have to set it only when `NEXTAUTH_URL` isn't publicly accessible |
<details><summary><h3>Email (Auth, notifications)</h3></summary>
<p>
Used for sending email notifications and authentication Used for sending email notifications and authentication
| Parameter | Default | Description | | Parameter | Default | Description |
| --------------------- | ------- | ------------------------------------------------------------------------------- | | ------------------------------ | ------- | ------------------------------------------------------------------------------------------ |
| SMTP_USERNAME | -- | SMTP username | | SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password | | SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) | | SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port | | SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) | | NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
| NEXT_PUBLIC_SMTP_AUTH_DISABLED | false | To disable the authentication by email but still use the provided config for notifications |
### Google (optional) </p></details>
<details><summary><h3>Google (Auth, Sheets, Fonts)</h3></summary>
<p>
Used authentication in the builder and for the Google Sheets integration step. Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.readonly`) in your console Used authentication in the builder and for the Google Sheets integration step. Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.readonly`) in your console
@@ -54,28 +63,24 @@ Used for Google Fonts:
| -------------------------- | ------- | --------------------------------------- | | -------------------------- | ------- | --------------------------------------- |
| NEXT_PUBLIC_GOOGLE_API_KEY | -- | The API Key from the Google API Console | | NEXT_PUBLIC_GOOGLE_API_KEY | -- | The API Key from the Google API Console |
## Builder </p></details>
The following variables are only used for the builder. <details><summary><h3>GitHub (Auth)</h3></summary>
<p>
### Email
| Parameter | Default | Description |
| ------------------------------ | ------- | -------------------------------------- |
| NEXT_PUBLIC_SMTP_AUTH_DISABLED | false | To disable the authentication by email |
### GitHub (optional)
Used for authenticating with GitHub. By default, it uses the credentials of a Typebot-dev app. Used for authenticating with GitHub. By default, it uses the credentials of a Typebot-dev app.
You can create your own GitHub OAuth app [here](https://github.com/settings/developers). You can create your own GitHub OAuth app [here](https://github.com/settings/developers).
| Parameter | Default | Description | | Parameter | Default | Description |
| ---------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | | ---------------------------- | ------- | --------------------------------------------------------------------------- |
| NEXT_PUBLIC_GITHUB_CLIENT_ID | 534b549dd17709a743a2 | Application client ID. Also used to check if it is enabled in the front-end | | NEXT_PUBLIC_GITHUB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| GITHUB_CLIENT_SECRET | 7adb03507504fb1a54422f6c3c697277cfd000a9 | Application secret | | GITHUB_CLIENT_SECRET | -- | Application secret |
### Facebook (optional) </p></details>
<details><summary><h3>Facebook (Auth)</h3></summary>
<p>
You can create your own Facebook OAuth app [here](https://developers.facebook.com/apps/create/). You can create your own Facebook OAuth app [here](https://developers.facebook.com/apps/create/).
@@ -84,7 +89,10 @@ You can create your own Facebook OAuth app [here](https://developers.facebook.co
| NEXT_PUBLIC_FACEBOOK_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end | | NEXT_PUBLIC_FACEBOOK_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| FACEBOOK_CLIENT_SECRET | -- | Application secret | | FACEBOOK_CLIENT_SECRET | -- | Application secret |
### S3 Storage (optional) </p></details>
<details><summary><h3>S3 Storage (Media uploads)</h3></summary>
<p>
Used for uploading images, videos, etc... It can be any S3 compatible object storage service (Minio, Digital Oceans Space, AWS S3...) Used for uploading images, videos, etc... It can be any S3 compatible object storage service (Minio, Digital Oceans Space, AWS S3...)
@@ -128,7 +136,10 @@ You also need to configure CORS so that an object can be uploaded from the brows
] ]
``` ```
### Giphy (optional) </p></details>
<details><summary><h3>Giphy (GIF picker)</h3></summary>
<p>
Used to search for GIF. You can create a Giphy app [here](https://developers.giphy.com/dashboard/) Used to search for GIF. You can create a Giphy app [here](https://developers.giphy.com/dashboard/)
@@ -136,13 +147,16 @@ Used to search for GIF. You can create a Giphy app [here](https://developers.gip
| ------------------------- | ------- | ------------- | | ------------------------- | ------- | ------------- |
| NEXT_PUBLIC_GIPHY_API_KEY | -- | Giphy API key | | NEXT_PUBLIC_GIPHY_API_KEY | -- | Giphy API key |
### Others (optional) </p></details>
<details><summary><h3>Others</h3></summary>
<p>
The [official Typebot managed service](https://app.typebot.io/) uses other services such as [Stripe](https://stripe.com/) for processing payments, [Sentry](https://sentry.io/) for tracking bugs and [Sleekplan](https://sleekplan.com/) for user feedbacks. The [official Typebot managed service](https://app.typebot.io/) uses other services such as [Stripe](https://stripe.com/) for processing payments, [Sentry](https://sentry.io/) for tracking bugs and [Sleekplan](https://sleekplan.com/) for user feedbacks.
The related environment variables are listed here but you are probably not interested in these if you self-host Typebot. The related environment variables are listed here but you are probably not interested in these if you self-host Typebot.
<details><summary>Stripe</summary> <details><summary><h4>Stripe</h4></summary>
<p> <p>
| Parameter | Default | Description | | Parameter | Default | Description |
@@ -155,7 +169,7 @@ The related environment variables are listed here but you are probably not inter
</p></details> </p></details>
<details><summary>Sentry</summary> <details><summary><h4>Sentry</h4></summary>
<p> <p>
| Parameter | Default | Description | | Parameter | Default | Description |
@@ -169,7 +183,7 @@ These can also be added to the `viewer` environment
</p></details> </p></details>
<details><summary>Vercel (custom domains)</summary> <details><summary><h4>Vercel (custom domains)</h4></summary>
<p> <p>
| Parameter | Default | Description | | Parameter | Default | Description |
@@ -180,7 +194,7 @@ These can also be added to the `viewer` environment
</p></details> </p></details>
<details><summary>Sleekplan</summary> <details><summary><h4>Sleekplan</h4></summary>
<p> <p>
| Parameter | Default | Description | | Parameter | Default | Description |
@@ -189,7 +203,7 @@ These can also be added to the `viewer` environment
</p></details> </p></details>
<details><summary>Webhooks</summary> <details><summary><h4>Internal Webhooks</h4></summary>
<p> <p>
| Parameter | Default | Description | | Parameter | Default | Description |
@@ -197,3 +211,41 @@ These can also be added to the `viewer` environment
| USER_CREATED_WEBHOOK_URL | -- | Webhook URL called whenever a new user is created (used for importing a new SendGrid contact) | | USER_CREATED_WEBHOOK_URL | -- | Webhook URL called whenever a new user is created (used for importing a new SendGrid contact) |
</p></details> </p></details>
</p></details>
## Viewer
| Parameter | Default | Description |
| ---------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| DATABASE_URL | postgresql://postgres:typebot@db:5432/typebot | The database URL |
| ENCRYPTION_SECRET | SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 | A 256-bit key used to encrypt sensitive data. It is strongly recommended to [generate](https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx) a new one. |
| NEXT_PUBLIC_VIEWER_URL | http://localhost:3001 | The viewer base URL. Should be the publicly accessible URL (i.e. `https://typebot.io`) |
<details><summary><h3>Emails (Notifications)</h3></summary>
<p>
Used for sending email notifications and authentication
| Parameter | Default | Description |
| --------------------- | ------- | ------------------------------------------------------------------------------- |
| SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
</p></details>
<details><summary><h3>Google (Sheets)</h3></summary>
<p>
Used when executing a Google Sheets block. Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.readonly`) in your console
| Parameter | Default | Description |
| ---------------------------- | ------- | --------------------------------------------- |
| NEXT_PUBLIC_GOOGLE_CLIENT_ID | -- | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | -- | The Client secret from the Google API Console |
</p></details>

14
apps/docs/src/css/custom.css
View File

@@ -32,3 +32,17 @@ img {
html[data-theme='dark'] .docusaurus-highlight-code-line { html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
summary h3,
summary h4 {
margin-bottom: 0;
}
summary h4 {
padding-top: 3px;
}
details {
background-color: transparent !important;
border-color: transparent !important;
}