Add Microsoft authentication to your app

1. 1

   Decide if you want Lovable to manage the Microsoft sign-in for you (simpler, default) or if you want to use your own Microsoft account credentials (more control).

   This choice affects how much setup you need to do and what features you can control, like showing your app's name or restricting who can sign in.

2. 2

   If you chose 'Managed by Lovable', tell Lovable to add a Microsoft sign-in button to your app.

   This is the quickest way to enable Microsoft sign-in without needing to set up anything in Microsoft Azure.

3. 3

   If you chose 'Your own credentials', go to the Azure Portal, create a new 'app registration' for your app, and generate a 'client secret'.

   This gives your app its own identity within Microsoft's system, allowing you to customize the sign-in experience and control access.

4. 4

   If you chose 'Your own credentials', enter the 'Client ID' and 'Client secret' from your Azure app registration into Lovable's Microsoft authentication settings.

   This connects your Lovable app to your specific Microsoft app registration.

5. 5

   If you chose 'Your own credentials', copy the 'Redirect URL(s)' from Lovable and add them to your app registration in the Azure Portal.

   This tells Microsoft where to send users back to after they successfully sign in, ensuring they return to your app.

6. 6

   Test the Microsoft sign-in process in your app.

   This confirms that users can successfully sign in with their Microsoft accounts and that new users appear in your Lovable user list.

Add a Microsoft sign-in button to my app.

OAuth

A secure way for users to give an app access to their information from another service (like Microsoft) without sharing their password.

Azure app registration

A record in Microsoft's cloud service (Azure) that identifies your app and allows it to interact with Microsoft services, like letting users sign in.

Client ID (Application ID)

A unique identifier for your app within Microsoft's system, like a username for your app.

Client secret

A secret password for your app, used to prove its identity to Microsoft. It's like a password for your app's username (Client ID).

Tenant ID (Directory ID)

A unique identifier for a specific organization or group of users within Microsoft's system. You can use it to limit sign-in to only people from a certain company.

Redirect URL(s)

The specific web addresses where Microsoft sends users back to after they have successfully signed in or given permission to your app.

Consent screen

The page Microsoft shows to users asking for their permission to let your app access their basic information, like their name and email.

• If using your own credentials, your Microsoft client secret will expire, causing sign-in to stop working. You must create a new one in Azure and update it in Lovable.
• Microsoft sign-in will fail if the 'Redirect URL(s)' in Lovable do not exactly match those configured in your Azure app registration.
• If you want to restrict sign-in to specific organizations or account types, you must use 'Your own credentials' and correctly configure the 'Tenant ID' in Lovable and 'Supported account types' in Azure.