diff --git a/web/docs/guides/auth/auth-azure.mdx b/web/docs/guides/auth/auth-azure.mdx new file mode 100644 index 00000000000..6b5b84c9ce6 --- /dev/null +++ b/web/docs/guides/auth/auth-azure.mdx @@ -0,0 +1,92 @@ +--- +id: auth-azure +title: 'Login with Azure' +description: Add Azure OAuth to your Supabase project +--- + +import Tabs from '@theme/Tabs' +import TabItem from '@theme/TabItem' + +To enable Azure 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 six 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`. +- Whitelist the callback url of your application. + +## Steps + +### Access your Azure Developer account + +- Go to [portal.azure.com](https://portal.azure.com/#home). +- 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://.supabase.co/auth/v1/callback` +- Click "Register" at the bottom of the form. + +![Register an application.](/img/guides/azure-register-app.png) + +### 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](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) under the column titled "Application (client) ID". + +![Obtain the client id](/img/guides/azure-client-id.png) + +### 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 client secret](/img/guides/azure-client-secret.png) + +### Add login code to your client app + +The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers). + +```js +const { user, session, error } = await supabase.auth.signIn({ + provider: 'Azure', +}) +``` + +Add a function which you can call from a button, link, or UI element. + +```js +async function signInWithAzure() { + const { user, session, error } = await supabase.auth.signIn({ + provider: 'Azure', + }, { + scopes: 'email', + }) +} +``` + +To log out: + +```js +async function signout() { + const { error } = await supabase.auth.signOut() +} +``` + +## Resources + +- [Azure Developer Account](https://portal.azure.com). +- [Github Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573). diff --git a/web/sidebars.js b/web/sidebars.js index c62b08083eb..2d7b417faad 100755 --- a/web/sidebars.js +++ b/web/sidebars.js @@ -148,6 +148,7 @@ module.exports = { 'guides/auth/auth-email', 'guides/auth/auth-magic-link', 'guides/auth/auth-apple', + 'guides/auth/auth-azure', 'guides/auth/auth-bitbucket', 'guides/auth/auth-discord', 'guides/auth/auth-facebook', diff --git a/web/src/data/authProviders.js b/web/src/data/authProviders.js index 0dce4ab7758..13770e5a00d 100644 --- a/web/src/data/authProviders.js +++ b/web/src/data/authProviders.js @@ -29,10 +29,10 @@ const authProviders = [ { name: 'Azure', // logo: '/img/libraries/dart-icon.svg', - href: 'https://github.com/supabase/gotrue/pull/54#issuecomment-757043573', + href: '/docs/guides/auth/auth-azure', official: false, supporter: 'TBD', - platform: false, + platform: true, selfHosted: true, }, { diff --git a/web/static/img/guides/azure-client-id.png b/web/static/img/guides/azure-client-id.png new file mode 100644 index 00000000000..f5a10632f4a Binary files /dev/null and b/web/static/img/guides/azure-client-id.png differ diff --git a/web/static/img/guides/azure-client-secret.png b/web/static/img/guides/azure-client-secret.png new file mode 100644 index 00000000000..3057ca3ad2c Binary files /dev/null and b/web/static/img/guides/azure-client-secret.png differ diff --git a/web/static/img/guides/azure-register-app.png b/web/static/img/guides/azure-register-app.png new file mode 100644 index 00000000000..d6550aa70f3 Binary files /dev/null and b/web/static/img/guides/azure-register-app.png differ