# Customize branding in Nylas Hosted Authentication flow

Source: https://developer.nylas.com/docs/dev-guide/whitelabeling/

Nylas provides a login page for Hosted Authentication that displays the Nylas logo to tell the user who is requesting access to their account. If the user isn’t expecting the Nylas logo or domain, however, they might cancel the auth process.

<img
  src="/_images/auth/hosted-auth-login.png"
  style="height:500px"
  alt="The default Nylas Hosted OAuth login page."
/>

Any Nylas admin can add their brand logo to their user auth screens for each application, so users see your company’s branding instead of the Nylas logo.

The Nylas domain (`nylas.com`) might still appear during the OAuth process. More customization features are available to further customize the auth experience, and prevent the Nylas domain from appearing in the process. If you're on a paid tier that includes it, you can replace these by [customizing your Hosted OAuth domain](#customize-authentication-domain).

## Set up Hosted Authentication branding

You can upload your own brand logo or icon for the user-facing Hosted OAuth page so it replaces the Nylas logo. Branding settings are unique to each Nylas application.

You can change the logo using either the [Nylas Dashboard](#add-branding-using-nylas-dashboard) or the [Nylas APIs](#add-branding-using-nylas-api).

> **Info:** 
> **The icon you use must be a PNG, JPG, or TIF file with a maximum size of 1MB**. Nylas automatically resizes the logo to 72x72 pixels, so it's recommended you use a square image.

### Add branding using Nylas Dashboard

To upload a logo for the Hosted Auth login page, navigate to your application in the Nylas Dashboard and select **Hosted authentication** in the left navigation. Then, enter a link to your logo in the **Icon URL** field.

### Add branding using Nylas API

Make an [Update Application request](/docs/reference/api/applications/update_application/) that includes the `branding.icon_url` parameter.

```bash
curl --request PATCH \
  --url 'https://api.us.nylas.com/v3/applications' \
  --header 'Content-Type: application/json' \
  --header 'Accept: application/json' \
  --header 'Authorization: Bearer <NYLAS_API_KEY>' \
  --data '{
    "branding": {
      "icon_url": "www.example.com/nylas-logo.png"
    }
  }'
```

## Customize authentication domain


By default, Nylas uses the `nylas.com` domain in the OAuth process, even if you replace the Nylas logo. If users don’t expect to see “Nylas” during authentication, they might stop the process on security grounds.

<img
  src="/_images/whitelabel-domain-default.png"
  style="width:500px"
  alt="Part of the Sign in with Google screen, displaying the 'Choose an account to continue to nylas.com' prompt."
/>

To prevent this, you can set up a CNAME so your own domain appears instead during the auth process.

1. [Subscribe to a Nylas plan](https://www.nylas.com/pricing/?utm_source=docs&utm_campaign=&utm_content=whitelabeling) that includes custom domain name support.
2. [Add your logo to the Hosted Auth page](#set-up-hosted-authentication-branding).
3. [Set up a CNAME record for authentication](#set-up-cname-record).
4. [Contact Nylas Support](/docs/support/#contact-nylas-support) to activate your domain.
5. [Update your provider auth apps](#update-provider-auth-apps) to allow authentication from your CNAME record address.

### Set up CNAME record

To enable authentication through your custom domain, you need to create a CNAME record in your DNS settings. Be sure to choose the subdomain you want to use for the auth process (for example, `auth.example.com`) and point the CNAME record to `<DOMAIN>-auth.us.nylas.com`. This is where you start user auth requests. For users authenticating using a web browser, this URL might be displayed in the address bar, so make sure your domain is clearly included.

> **Success:** 
> **Make sure to test the DNS settings for your CNAME record before you use it in production**. If it’s not set up properly, your users won’t be able to use your auth flow.

After you set up your CNAME record, you can [contact Nylas Support](/docs/support/#contact-nylas-support) to activate your domain.

### Update provider auth apps

Now that you have a CNAME record, you need to add the URL to your provider auth apps as an allowed redirect URI. You can either make this an _additional_ URI, or use it to _replace_ the Nylas redirect URI. For example, you might have `api.us.nylas.com/v3/connect/callback` configured as a redirect URI, and replace it with `<DOMAIN>-auth.us.nylas.com/v3/connect/callback`.

- **Google auth apps**: Log in to the GCP portal, select **Credentials** in the left navigation, and update the appropriate credential record.
- **Azure auth apps**: Log in to the Microsoft Azure portal, search for **App registrations**, navigate to the resulting page, and update the **Redirect URI**.

## Using customized Hosted Authentication

After you set up and enable customized Hosted Authentication, you can access the auth flow using the same API methods — you just need to replace the Nylas API route with your custom domain.

For example, you might have a URL to start authentication that looks like this: `https://api.us.nylas.com/v3/connect/auth?client_id=<NYLAS_CLIENT_ID>&redirect_uri=<https://myapp.example.com/callback-handler>&response_type=code&provider=google`. Using customized authentication, it would resemble `https://<DOMAIN>-auth.us.nylas.com/v3/connect/auth?client_id=<NYLAS_CLIENT_ID>&redirect_uri=<https://myapp.example.com/callback-handler>&response_type=code&provider=google` instead.