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
NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
NEXT_PUBLIC_GITHUB_CLIENT_ID=534b549dd17709a743a2
GITHUB_CLIENT_SECRET=7adb03507504fb1a54422f6c3c697277cfd000a9
S3_ACCESS_KEY=minio
S3_SECRET_KEY=minio123
S3_BUCKET=typebot

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

@ -5,6 +5,7 @@ import {
Stack,
HStack,
useToast,
Text,
} from '@chakra-ui/react'
import React, { ChangeEvent, FormEvent, useEffect } from 'react'
import { useState } from 'react'
@ -12,6 +13,14 @@ import { signIn, useSession } from 'next-auth/react'
import { DividerWithText } from './DividerWithText'
import { SocialLoginButtons } from './SocialLoginButtons'
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 = {
defaultEmail?: string
@ -49,6 +58,21 @@ export const SignInForm = ({
})
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 (
<Stack spacing="4" w="330px">
<SocialLoginButtons />

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

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

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

@ -12,15 +12,13 @@ import { User } from 'db'
const providers: Provider[] = []
providers.push(
GitHubProvider({
clientId:
process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID ?? '534b549dd17709a743a2',
clientSecret:
process.env.GITHUB_CLIENT_SECRET ??
'7adb03507504fb1a54422f6c3c697277cfd000a9',
})
)
if (process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID)
providers.push(
GitHubProvider({
clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
})
)
if (
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!
:::
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 |
| ---------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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`) |
## Builder
### 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
| 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>`) |
| 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>`) |
| 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
@ -54,28 +63,24 @@ Used for Google Fonts:
| -------------------------- | ------- | --------------------------------------- |
| 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.
### Email
| Parameter | Default | Description |
| ------------------------------ | ------- | -------------------------------------- |
| NEXT_PUBLIC_SMTP_AUTH_DISABLED | false | To disable the authentication by email |
### GitHub (optional)
<details><summary><h3>GitHub (Auth)</h3></summary>
<p>
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).
| Parameter | Default | Description |
| ---------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- |
| NEXT_PUBLIC_GITHUB_CLIENT_ID | 534b549dd17709a743a2 | Application client ID. Also used to check if it is enabled in the front-end |
| GITHUB_CLIENT_SECRET | 7adb03507504fb1a54422f6c3c697277cfd000a9 | Application secret |
| Parameter | Default | Description |
| ---------------------------- | ------- | --------------------------------------------------------------------------- |
| NEXT_PUBLIC_GITHUB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| 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/).
@ -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 |
| 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...)
@ -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/)
@ -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 |
### 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 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>
| Parameter | Default | Description |
@ -155,7 +169,7 @@ The related environment variables are listed here but you are probably not inter
</p></details>
<details><summary>Sentry</summary>
<details><summary><h4>Sentry</h4></summary>
<p>
| Parameter | Default | Description |
@ -169,7 +183,7 @@ These can also be added to the `viewer` environment
</p></details>
<details><summary>Vercel (custom domains)</summary>
<details><summary><h4>Vercel (custom domains)</h4></summary>
<p>
| Parameter | Default | Description |
@ -180,7 +194,7 @@ These can also be added to the `viewer` environment
</p></details>
<details><summary>Sleekplan</summary>
<details><summary><h4>Sleekplan</h4></summary>
<p>
| Parameter | Default | Description |
@ -189,7 +203,7 @@ These can also be added to the `viewer` environment
</p></details>
<details><summary>Webhooks</summary>
<details><summary><h4>Internal Webhooks</h4></summary>
<p>
| 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) |
</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 {
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;
}