Login with Azure (Microsoft)

To enable Azure (Microsoft) Auth for your project, you need to set up an Azure OAuth application and add the application credentials to your Supabase Dashboard.

Overview#

Azure OAuth consists of four broad steps:

Create an application under Azure Active Directory.
Obtain a Application (client) ID with “Sign In with Azure” capabilities. This will be used as the client id.
Create a Secret ID with “Sign In with Azure” capabilities. The value of the secret will be used as the client secret.
Add the callback url of your application to the allowlist.

Access your Azure Developer account#

Go to portal.azure.com.
Login and select "Azure Active Directory" under the list of Azure Services.

Register an application#

Under Azure Active Directory, select "App registrations" in the side panel.
Select "New registration".
Choose a name and select your preferred option for the supported account types.
Specify the "Redirect URI".
The redirect / callback URI should look like this: https://<project-ref>.supabase.co/auth/v1/callback
Click "Register" at the bottom of the form.

Obtain a Client ID#

This will serve as the client_id when you make API calls to authenticate the user.

Once your app has been registered, the client id can be found under the list of app registrations under the column titled "Application (client) ID".

Obtain a Secret ID#

This will serve as the client_secret when you make API calls to authenticate the user.

Click on the name of the app registered above.
Under "Essentials", click on "Client credentials".
Navigate to the "Client secrets" tab and select "New client secret".
Enter a description and choose your preferred expiry for the secret.
Once the secret is generated, save the value (not the secret ID).

Obtain the Tenant URL#

This will allow your users to use your custom Azure login page when logging in.

Select the Directory (Tenant) ID value.
The Azure Tenant URL should look like this: https://login.microsoftonline.com/<tenant-id>

tip

Supabase Auth requires that Azure returns a valid email address. Therefore you must request the email scope in the signIn method above.

When your user signs in, call signInWithOAuth() with azure as the provider:

async function signInWithAzure() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'azure',
    options: {
      scopes: 'email',
    },
  })
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

async function signout() {
  const { error } = await supabase.auth.signOut()
}

Obtain the provider refresh token#

Azure OAuth2.0 doesn't return the provider_refresh_token by default. If you need the provider_refresh_token returned, you will need to include the following scope:

async function signInWithAzure() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'azure',
    options: {
      scopes: 'offline_access',
    },
  })
}

Resources#

Edit this page on GitHub