Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Google OAuth #2647

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: Google OAuth #2647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f59c026
fix: Google OAuth
harshilp24 Nov 13, 2024
ff06b85
..
harshilp24 Nov 13, 2024
5c80741
..
harshilp24 Nov 14, 2024
d65bdd3
github
harshilp24 Nov 14, 2024
ad642d2
..
harshilp24 Nov 15, 2024
78a9104
..
harshilp24 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...rted/setup/instance-configuration/authentication/github-appsmith-settings-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...tarted/setup/instance-configuration/authentication/github-appsmith-settings.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 42 additions & 36 deletions ...ocs/getting-started/setup/instance-configuration/authentication/github-login.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,65 +7,66 @@

# 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

Check warning on line 22 in website/docs/getting-started/setup/instance-configuration/authentication/github-login.md

View workflow job for this annotation

GitHub Actions / run_vale 

[vale] reported by reviewdog 🐶
[Google.Headings] 'Create OAuth App on GitHub' should use sentence-style capitalization.

Raw Output:
{"message": "[Google.Headings] 'Create OAuth App on GitHub' should use sentence-style capitalization.", "location": {"path": "website/docs/getting-started/setup/instance-configuration/authentication/github-login.md", "range": {"start": {"line": 22, "column": 4}}}, "severity": "WARNING"}

![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.
:::
<ZoomImage src="/img/github-oauth-create.png" alt="" caption="" />

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
<dd>

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`).

Check failure on line 40 in website/docs/getting-started/setup/instance-configuration/authentication/github-login.md

View workflow job for this annotation

GitHub Actions / run_vale 

[vale] reported by reviewdog 🐶
[Google.Latin] Use 'for example' instead of 'e.g.,'.

Raw Output:
{"message": "[Google.Latin] Use 'for example' instead of 'e.g.,'.", "location": {"path": "website/docs/getting-started/setup/instance-configuration/authentication/github-login.md", "range": {"start": {"line": 40, "column": 60}}}, "severity": "ERROR"}

- **Homepage URL:** Copy and paste the Homepage URL from the GitHub configuration in Appsmith (e.g., `https://app.appsmith.com`).

Check failure on line 42 in website/docs/getting-started/setup/instance-configuration/authentication/github-login.md

View workflow job for this annotation

GitHub Actions / run_vale 

[vale] reported by reviewdog 🐶
[Google.Latin] Use 'for example' instead of 'e.g.,'.

Raw Output:
{"message": "[Google.Latin] Use 'for example' instead of 'e.g.,'.", "location": {"path": "website/docs/getting-started/setup/instance-configuration/authentication/github-login.md", "range": {"start": {"line": 42, "column": 96}}}, "severity": "ERROR"}

- **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.

Check failure on line 44 in website/docs/getting-started/setup/instance-configuration/authentication/github-login.md

View workflow job for this annotation

GitHub Actions / run_vale 

[vale] reported by reviewdog 🐶
[Google.Latin] Use 'for example' instead of 'e.g.,'.

Raw Output:
{"message": "[Google.Latin] Use 'for example' instead of 'e.g.,'.", "location": {"path": "website/docs/getting-started/setup/instance-configuration/authentication/github-login.md", "range": {"start": {"line": 44, "column": 110}}}, "severity": "ERROR"}

<ZoomImage src="/img/oauth-settings-github.png" alt="" caption="" />



</dd>

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 (`<PROJECT_ROOT>/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:


<ZoomImage src="/img/github-appsmith-settings.png" alt="" caption="" />



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: `[email protected]`). 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:
Expand All @@ -75,7 +76,12 @@
```
:::

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.

<ZoomImage src="/img/github-auth.png" alt="" caption="" />




## Further reading

Expand Down
106 changes: 65 additions & 41 deletions ...ocs/getting-started/setup/instance-configuration/authentication/google-login.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,76 +7,94 @@

# 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**.
<dd>

![Click to expand](</img/Google_OAuth_Consent_1.png>)
<ZoomImage src="/img/Google_OAuth_Consent_1.png" alt="" caption="" />

2. Configure the OAuth consent screen with information about the app and the **Authorized domains** where you are hosting Appsmith.
</dd>

![Click to expand](</img/Google_OAuth_Consent.png>)
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](</img/Google_OAuth_Creds.png>)

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`)
<dd>

5. Click **Create**. You can get the Client ID and Client secret under **OAuth 2.0 Client IDs** in the **Credentials** screen.
<ZoomImage src="/img/auth-google-oauth.png" alt="" caption="" />

![Click to expand](</img/Google_Oauth_Creds_2.png>)
</dd>

## 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
<dd>

### Admin settings
<ZoomImage src="/img/google-scopes-auth.png" alt="" caption="" />

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.
</dd>

![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**.

<dd>

<ZoomImage src="/img/Google_OAuth_Creds.png" alt="" caption="" />

</dd>


7. Under **Application type**, select **Web application**. Copy the following URLs from Appsmith and paste them into the corresponding fields:

<dd>

- **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.

Check failure on line 71 in website/docs/getting-started/setup/instance-configuration/authentication/google-login.md

View workflow job for this annotation

GitHub Actions / run_vale 

[vale] reported by reviewdog 🐶
[Google.Latin] Use 'for example' instead of 'e.g.,'.

Raw Output:
{"message": "[Google.Latin] Use 'for example' instead of 'e.g.,'.", "location": {"path": "website/docs/getting-started/setup/instance-configuration/authentication/google-login.md", "range": {"start": {"line": 71, "column": 98}}}, "severity": "ERROR"}

</dd>

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 (`<PROJECT_ROOT>/stacks/configuration/`) and in the `values.yaml` file for Kubernetes:
<dd>

<ZoomImage src="/img/clientid-googleauth.png" alt="" caption="" />

</dd>


## 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:

<ZoomImage src="/img/google-auth-appsmith.png" alt="" caption="" />


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: `[email protected]`). 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:
Expand All @@ -86,7 +104,13 @@
```
:::

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.



<ZoomImage src="/img/google-auth-main.png" alt="" caption="" />




## Further reading
Expand Down
Binary file added website/static/img/auth-google-oauth.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/clientid-googleauth.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/github-appsmith-settings.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/github-auth.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/github-oauth-create.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/google-auth-appsmith.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/google-auth-main.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/google-scopes-auth.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/static/img/oauth-settings-github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading