diff --git a/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings-1.png b/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings-1.png new file mode 100644 index 0000000000..752b25b38e Binary files /dev/null and b/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings-1.png differ diff --git a/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings.png b/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings.png new file mode 100644 index 0000000000..752b25b38e Binary files /dev/null and b/website/docs/getting-started/setup/instance-configuration/authentication/github-appsmith-settings.png differ diff --git a/website/docs/getting-started/setup/instance-configuration/authentication/github-login.md b/website/docs/getting-started/setup/instance-configuration/authentication/github-login.md index 467faca853..34a8b39585 100644 --- a/website/docs/getting-started/setup/instance-configuration/authentication/github-login.md +++ b/website/docs/getting-started/setup/instance-configuration/authentication/github-login.md @@ -7,65 +7,66 @@ sidebar_position: 2 # GitHub OAuth -Appsmith allows you to integrate with GitHub OAuth, enabling end users to sign in to the Appsmith account using their GitHub authentication credentials. + +This page shows how to configure Appsmith to use [GitHub OAuth](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps) as an authentication provider. By integrating with GitHub OAuth, Appsmith enables end users to sign in to their Appsmith accounts using their GitHub credentials. ## Prerequisites 1. A self-hosted Appsmith instance. See the [installation guides](/getting-started/setup/installation-guides) for installing Appsmith. 2. A [GitHub](https://github.com/login) account. +3. Before setting up GitHub OAuth, ensure that you have already configured a [custom domain](/getting-started/setup/instance-configuration/custom-domain) for your instance. +4. In Appsmith, go to **Admin Settings** > **Authentication** and click **Enable** on **GitHub**. -## Register OAuth app on GitHub -To enable GitHub Sign in, log in to your [GitHub Account](https://github.com) and follow the steps below: -1. In your profile drop-down, navigate to **Settings > Developer Settings > OAuth Apps** and click **Register a new application** to create and register a new OAuth App. +## Create OAuth App on GitHub -![Click to expand](/img/Github_Reg_App.png) -2. Configure the following OAuth Credentials for a web application: +1. Open your [GitHub Account](https://github.com). - 1. **Homepage URL:** the domain on which you host Appsmith with HTTPS (Eg: `https://app.appsmith.com`). +2. Navigate to your profile icon in the top-right corner and open **Settings**. - 2. **Authorization Callback URL:** append `/login/oauth2/code/github` to the Homepage URL (Eg: `https://app.appsmith.com/login/oauth2/code/github`). +3. In **Settings**, go to **Developer Settings** > **OAuth Apps** and click **New OAuth apps** to configure a new Appsmith OAuth app. - ![Click to expand](/img/Github_App_Config.png) -## Configure Appsmith instance -:::caution -Test the Client ID and Client Secret before disabling Form login on Appsmith. This ensures that users can access Appsmith with their GitHub credentials. To fix an invalid GitHub configuration, update the environment variables. -::: + -There are two ways to configure the self-hosted Appsmith instance - -- Admin Settings -- Environment Variables +4. Add the following details for the OAuth app configuration: -### Admin settings +
-Click **Admin Settings > Authentication > Enable**(GitHub). Add the `Client ID` and `Client Secret`. Click the **Save & Restart** button at the bottom of the page. +- **Application Name:** Enter a name for your application (e.g., `Appsmith GitHub OAuth`). + +- **Homepage URL:** Copy and paste the Homepage URL from the GitHub configuration in Appsmith (e.g., `https://app.appsmith.com`). + +- **Authorization Callback URL:** Copy and paste the Callback URL from the GitHub configuration in Appsmith (e.g., `https://app.appsmith.com/login/oauth2/code/github`) and paste it here. + + + + + +
+ +5. Click **Register application** to create the OAuth app. Once the app is created, copy the **Client ID** and **Client Secret** to use in Appsmith’s GitHub configuration. -![Github authentication configuration image](/img/as_github_auth_config.png) -:::info -If you have set values using [environment variables](#environment-variables) for your instance, those values take precedence over values specified in the Admin Settings UI. -::: -### Environment variables -Update the values for the following keys in the instance configuration file, for example, in the `docker.env` file for Docker installation (`/stacks/configuration/`) and in the `values.yaml` file for Kubernetes: +## Register GitHub OAuth in Appsmith + +To complete the Github OAuth configuration, you have to register the provider on Appsmith. Go to **Admin Settings > Authentication > Github**, and follow the steps below: + + + + + + +1. Add the **Client ID** and **Client Secret** copied from the Github OAuth Settings into the respective fields. + +2. Once you have added the details, click the **Save & Restart** button to save the configuration and restart the instance. -- Configure the `APPSMITH_OAUTH2_GITHUB_CLIENT_ID` and `APPSMITH_OAUTH2_GITHUB_CLIENT_SECRET` fields with the client ID and client secret generated in the preceding step. -- Configure `APPSMITH_SIGNUP_ALLOWED_DOMAINS` with a second-level domain name (ex: `abc.com`), to only allow users with an email address from that domain name to log in (ex: `john@abc.com`). You can provide several domain names using a comma-separated list. - ```bash - # Example configuration in docker.env file - # ********* GitHub OAuth ********** - APPSMITH_OAUTH2_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID - APPSMITH_OAUTH2_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET - APPSMITH_SIGNUP_ALLOWED_DOMAINS=exampledomain.com - # ****************************** - ``` -- Restart the Appsmith instance. :::info If you're running Appsmith on a **Kubernetes** cluster with an HA configuration, after completing the setup, run the following command to ensure the new authentication settings are properly applied: @@ -75,7 +76,12 @@ kubectl rollout restart deployment/appsmith -n ``` ::: -After these steps, your Appsmith installation should now enable GitHub Login. +After the Appsmith instance restarts, log in to your account to see the GitHub Login button on the login screen. + + + + + ## Further reading diff --git a/website/docs/getting-started/setup/instance-configuration/authentication/google-login.md b/website/docs/getting-started/setup/instance-configuration/authentication/google-login.md index 593a41f5d4..9ad38d0d97 100644 --- a/website/docs/getting-started/setup/instance-configuration/authentication/google-login.md +++ b/website/docs/getting-started/setup/instance-configuration/authentication/google-login.md @@ -7,76 +7,94 @@ sidebar_position: 1 # Google OAuth -Appsmith provides a way to integrate with Google OAuth 2.0, enabling end users to sign in to the Appsmith account using their Google authentication credentials. +This page shows how to configure Appsmith to use [Google OAuth 2.0](https://developers.google.com/identity/protocols/oauth2) as an authentication provider. By integrating with Google OAuth 2.0, Appsmith enables end users to sign in to their Appsmith accounts using their Google credentials. + ## Prerequisites 1. A self-hosted Appsmith instance. See the [installation guides](/getting-started/setup/installation-guides) for installing Appsmith. 2. A [Google Workspace](https://workspace.google.com/intl/en_in/) account. +3. Before setting up Google Auth, ensure that you have already configured a [custom domain](/getting-started/setup/instance-configuration/custom-domain) for your instance. +4. In Appsmith, go to **Admin Settings** > **Authentication** and click **Enable** on **Google**. ## Configure Google API console -To enable Google Sign-in, go to the [Google API console](https://console.cloud.google.com/apis) to get the authorization credentials that identify Appsmith to Google's OAuth 2.0 server. Create a new project and follow the steps below: +1. Open the [Google API console](https://console.cloud.google.com/apis) to obtain the authorization credentials needed for Appsmith to connect with Google’s OAuth 2.0 server. -1. Navigate to the **OAuth consent screen** under **APIs & Services**. Choose how you want to configure and register your app, including your target users and click **Create**. +
- ![Click to expand]() + -2. Configure the OAuth consent screen with information about the app and the **Authorized domains** where you are hosting Appsmith. +
- ![Click to expand]() +2. Create a new project, and navigate to the **OAuth consent screen** under APIs & Services. Configure and register your app based on your target users, and click **Create**. -3. Navigate to the **Credentials** screen and click **Create Credentials**, select **OAuth client ID** from the options to create OAuth credentials. - ![Click to expand]() -4. Select **Web application** under the **Application type** dropdown list. Update the following fields: +3. In the **OAuth consent screen**, enter the app information, contact email, and specify the **Authorized domains** where Appsmith is hosted. Click **Save and Continue**. - 1. **Authorized JavaScript origins** - The HTTP origins that host your web application. (Eg: `https://app.appsmith.com`) - 2. **Authorized redirect URIs** - Append the path that users should be redirected to after they have authenticated with Google (Eg: `https://app.appsmith.com/login/oauth2/code/google`) +
-5. Click **Create**. You can get the Client ID and Client secret under **OAuth 2.0 Client IDs** in the **Credentials** screen. + - ![Click to expand]() +
-## Configure Appsmith instance +4. In the **Scopes** section, add scopes such as `email`, `profile`, and `openid`, or others as needed. Click **Save and Continue**. -:::caution -Test the Client ID and Client Secret before disabling Form login on Appsmith. This ensures that users can access Appsmith with their Google credentials. To fix an invalid Google configuration, update the environment variables. -::: -There are two ways to configure the self-hosted Appsmith instance - -- Admin Settings -- Environment Variables +
-### Admin settings + -You can add the Client ID, Client Secret and allowed domains from [Admin Settings](/getting-started/setup/instance-configuration/). Go to **Admin Settings> Authentication> Google**, fill the required fields and click the **Save & Restart** button at the bottom of the page. +
-![Google authentication configuration image](/img/as_google_auth_config.png) -:::info -If you have set values using [environment variables](#environment-variables) for your instance, those values take precedence over values specified in the Admin Settings UI. -::: +5. Add **Test** users if needed, then click **Save**. + +6. Navigate to the **Credentials** section, click **Create Credentials**, and select **OAuth client ID**. + +
+ + + +
+ + +7. Under **Application type**, select **Web application**. Copy the following URLs from Appsmith and paste them into the corresponding fields: + +
+ +- **Authorized JavaScript origins:** This is the URL where Appsmith is hosted. Copy the JavaScript origins URL from the Google configuration in Appsmith and paste it here. + +- **Authorized redirect URIs**: Copy the Redirect URL from the Google configuration in Appsmith (e.g., `https://app.appsmith.com/login/oauth2/code/google`) and paste it here. + +
+ +8. Click **Create**. After the OAuth client is created, copy the **Client ID** and **Client Secret** to use in Appsmith’s Google configuration. -### Environment variables -Update the values for the following keys in the instance configuration file, for example, in the `docker.env` file for Docker installation (`/stacks/configuration/`) and in the `values.yaml` file for Kubernetes: +
+ + + +
+ + +## Register Google OAuth in Appsmith + +To complete the Google OAuth configuration, you have to register the provider on Appsmith. Go to **Admin Settings > Authentication > Google**, and follow the steps below: + + + + +1. Add the **Client ID** and **Client Secret** copied from the Google API console into the respective fields. + +2. In the **Allowed Domain** field, add the domains where Appsmith accepts sign-ins via Google. This restricts access to specified domains, ensuring only users with emails from these domains can log in through Google. + +3. Once you have added the details, click the **Save & Restart** button to save the configuration and restart the instance. -* Configure the `APPSMITH_OAUTH2_GOOGLE_CLIENT_ID` and `APPSMITH_OAUTH2_GOOGLE_CLIENT_SECRET` fields with the client ID and client secret generated in the preceding step. -* Configure `APPSMITH_SIGNUP_ALLOWED_DOMAINS` with a second-level domain name (Eg: `abc.com`), to only allow users with an email address from that domain name to log in (Eg: `john@abc.com`). You can provide several domain names using a comma-separated list. -* Restart the Appsmith instance. - - ```bash - # Example configuration in docker.env file - # ******** Google OAuth ******** - APPSMITH_OAUTH2_GOOGLE_CLIENT_ID=YOUR_CLIENT_ID - APPSMITH_OAUTH2_GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET - APPSMITH_SIGNUP_ALLOWED_DOMAINS=exampledomain.com - # ****************************** - ``` :::info If you're running Appsmith on a **Kubernetes** cluster with an HA configuration, after completing the setup, run the following command to ensure the new authentication settings are properly applied: @@ -86,7 +104,13 @@ kubectl rollout restart deployment/appsmith -n ``` ::: -After these steps, Google Login should be enabled for your Appsmith installation. +After the Appsmith instance restarts, try logging in again to your account. You'll see a login screen with the Google Login button. + + + + + + ## Further reading diff --git a/website/static/img/auth-google-oauth.png b/website/static/img/auth-google-oauth.png new file mode 100644 index 0000000000..1b4b28327a Binary files /dev/null and b/website/static/img/auth-google-oauth.png differ diff --git a/website/static/img/clientid-googleauth.png b/website/static/img/clientid-googleauth.png new file mode 100644 index 0000000000..2e76f3d4b8 Binary files /dev/null and b/website/static/img/clientid-googleauth.png differ diff --git a/website/static/img/github-appsmith-settings.png b/website/static/img/github-appsmith-settings.png new file mode 100644 index 0000000000..752b25b38e Binary files /dev/null and b/website/static/img/github-appsmith-settings.png differ diff --git a/website/static/img/github-auth.png b/website/static/img/github-auth.png new file mode 100644 index 0000000000..c5437c1a9a Binary files /dev/null and b/website/static/img/github-auth.png differ diff --git a/website/static/img/github-oauth-create.png b/website/static/img/github-oauth-create.png new file mode 100644 index 0000000000..831c2e90fe Binary files /dev/null and b/website/static/img/github-oauth-create.png differ diff --git a/website/static/img/google-auth-appsmith.png b/website/static/img/google-auth-appsmith.png new file mode 100644 index 0000000000..ccecb1320f Binary files /dev/null and b/website/static/img/google-auth-appsmith.png differ diff --git a/website/static/img/google-auth-main.png b/website/static/img/google-auth-main.png new file mode 100644 index 0000000000..0db87dc5ce Binary files /dev/null and b/website/static/img/google-auth-main.png differ diff --git a/website/static/img/google-scopes-auth.png b/website/static/img/google-scopes-auth.png new file mode 100644 index 0000000000..4c4a471564 Binary files /dev/null and b/website/static/img/google-scopes-auth.png differ diff --git a/website/static/img/oauth-settings-github.png b/website/static/img/oauth-settings-github.png new file mode 100644 index 0000000000..648bed48fa Binary files /dev/null and b/website/static/img/oauth-settings-github.png differ