> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmocha.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Login Options & Branding

> Add your own branding to the login experience for your users

All Mocha apps come with Google sign-in already working. Your users can log in with their Google accounts immediately—no setup required.

**Why this works well:**

* Zero configuration needed
* No technical setup or Google approvals
* Your app is ready to accept user logins right away

**The trade-off:**
When users sign in, they'll see "Mocha" in the Google sign-in screen instead of your app's name and logo.

## Using Your Own Google Sign-In

If you are a Silver or Gold subscriber and want your users to see your app's branding when signing in, you can connect your own Google OAuth client. This requires creating credentials through Google, but gives you complete control over the sign-in experience.

**What you'll gain:**

* Your app name and logo in the Google sign-in flow (instead of Mocha's)
* Professional, branded authentication experience

**What you'll need to do:**

* Create a Google Cloud account (free)
* Set up a Google OAuth client (we'll walk you through this)
* In Mocha, in your application settings, enter your client ID and client secret in the "Google Sign In" section

## About Google OAuth Clients

We use the language "Google OAuth clients" but sometimes these are called "OAuth applications" or "credentials" by Google. These are simply the connection settings that let your app use Google sign-in with your own branding.

## Setting Up Your Google OAuth Client

1. Go to the [Google Developer Console](https://console.developers.google.com/)
2. Create a new project or select an existing one
3. Search for and navigate to the "OAuth consent screen"
4. Click on "Create OAuth client"
5. Choose "Web application" as the application type
6. Add Mocha's redirect URI `https://getmocha.com/u/oauth/google/callback` as one of the "Authorized redirect URIs" -- **this is critical for sign in to work**
7. In your Mocha project, go to the "Google Sign In" section in the settings dialog and paste the client ID and client secret into the appropriate fields. Click "Add OAuth client"
8. If your configuration is correct and your application is approved by Google, your app will immediately start using your custom OAuth client for signing in

The "Branding" section in the Google Developer Console allows you to customize how your app appears in the Google sign-in flow. You can add your app's name, logo, and other branding elements.

<img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/custom-google-oauth-client.png?fit=max&auto=format&n=Q5Os2Tbn61W-oFpO&q=85&s=1e9f2367786b8b9df050a73b32ca5a46" alt="Creating a Google OAuth client" width="2824" height="2276" data-path="images/custom-google-oauth-client.png" />

<img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/add-google-oauth-client-mocha.png?fit=max&auto=format&n=Q5Os2Tbn61W-oFpO&q=85&s=ca6e16d069d87242cd6c7a5dfa1fe656" alt="Adding custom Google OAuth client in Mocha" width="2038" height="1528" data-path="images/add-google-oauth-client-mocha.png" />

*Note: DO NOT share the client ID or client secret with anyone! They are sensitive passwords. The values in the images above were never used and have been deleted.*

## Scopes

You might see information about scopes. At this time, Mocha only supports `email profile` scopes. This will be customizable in the future.

## Google resources

* [https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic\_data.setvar.console\_name](https://developers.google.com/identity/protocols/oauth2#1.-obtain-oauth-2.0-credentials-from-the-dynamic_data.setvar.console_name).
* [https://support.google.com/cloud/answer/15549257?sjid=13321326564820129226-NC#zippy=%2Cauthorized-domains%2Cuser-type](https://support.google.com/cloud/answer/15549257?sjid=13321326564820129226-NC#zippy=%2Cauthorized-domains%2Cuser-type)
