OAuth

​

Configuration

The base application includes configurations for two providers: Google and GitHub, plus a Magic Link option.

• To enable the Google provider, you need to set the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables.
• To enable the GitHub provider, you need to set the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.

services:
  server:
    environment:
      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
      GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID}
      GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}

The Magic Link option requires only a working email provider. If the log option is chosen for email configuration, the magic link will appear in the application logs.

​

Implementation Details

The OAuth implementation does not depend on any external providers. It’s built using the golang.org/x/oauth2 library. The main logic can be found in the /auth/provider.go file.

​

Adding a new provider

To add a new provider, follow these steps in the /auth/provider.go file:

​

Backend

1. Add the new provider to the Provider constant.

const (
    Google Provider = "google"
    GitHub Provider = "github"
    Email Provider = "email"
    Discord Provider = "discord"
)

2. Create a new provider struct.

type oauthDiscord struct {
	config oauth2.Config
}

3. Return the new provider in the NewProvider function:

case Discord:
    return &oauthDiscord{
        config: oauth2.Config{
            ClientID:     system.DISCORD_CLIENT_ID,
            ClientSecret: system.DISCORD_CLIENT_SECRET,
            Endpoint: oauth2.Endpoint{
                AuthURL:  "https://discord.com/api/oauth2/authorize",
                TokenURL: "https://discord.com/api/oauth2/token",
            },
            RedirectURL: system.CLIENT_URL + "/auth/discord",
            Scopes:      []string{"identify", "email"},
        },
    }

4. Implement the required methods:

func (o *oauthDiscord) getProvider() Provider {
    return Discord
}

func (o *oauthDiscord) getOAuthConfig() *oauth2.Config {
    return &o.config
}

func (o *oauthDiscord) getUserInfo(accessToken string) (*UserInfo, error) {
    // Implement the logic to get the user info
}

5. Add any new secrets in the env.go file.

6. Fill in the docker-compose.yml file with the new provider configuration.

services:
  server:
    environment:
      DISCORD_CLIENT_ID: ${DISCORD_CLIENT_ID}
      DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET}

​

Frontend

On the frontend side, all you need to do is create a new form with a button and a hidden input that holds the new provider name.

SvelteKit:

<form action="?/login" method="post" on:submit|preventDefault={handleSubmit}>
    <input type="hidden" name="provider" value="discord" />
    <Button class="w-full">
        <svelte:fragment slot="icon">
            <DiscordIcon class="h-5 w-5" />
        </svelte:fragment>
        Continue with Discord
    </Button>
</form>

NextJS:

<form action={submit}>
    <input type="hidden" name="provider" value="discord" />
    <Button className="w-full" icon={<DiscordIcon className="h-5 w-5" />}>
        Continue with Discord
    </Button>
</form>

​

Getting Secrets

​

Github

To get the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET, you need to create a new GitHub App:

1. Go to GitHub Developer Settings.
2. Click on “New GitHub App”.
3. Fill in the GitHub App name, Homepage URL, Callback URL.
4. Check Request user authorization (OAuth) during installation.
5. Uncheck Active on Webhook.
6. Check Any account on Where can this GitHub App be installed?.
7. Click on “Create GitHub App”.
8. Click on “Generate a new client secret”.
9. Copy the Client ID and Client Secret.

​

Google

To get the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET, you need to create a new Google Project:

1. Go to Google Cloud Console.
2. Click on “Select a project” and then “New Project”.
3. Fill in the Project name and click on “Create”.
4. Go to “APIs & Services” > “OAuth consent screen”.
5. Fill all the required fields and click on “Save and continue”.
6. Go to “APIs & Services” > “Credentials”.
7. Click on “Create credentials” > “OAuth client ID”.
8. Select “Web application”.
9. Fill in the Name, Authorized redirect URIs and click on “Create”.
10. Copy the Client ID and Client Secret.

​

Need help?

Visit our discord server to ask any questions, make suggestions and give feedback :).

https://discord.gg/EdSZbQbRyJ