Add Microsoft authentication to your app

1. 1

   Decide if you want Lovable to manage the Microsoft sign-in setup or if you want to use your own Microsoft account settings.

   Lovable managing it is easier and requires no extra accounts, but using your own settings gives you more control over branding and who can sign in.

2. 2

   If you chose Lovable to manage it, ask Lovable to add a Microsoft sign-in button to your app.

   This automatically sets up Microsoft sign-in for your users without you needing to do anything in a Microsoft account.

3. 3

   If you chose to use your own Microsoft account settings, create an 'app registration' in the Azure Portal, noting down the Client ID and Client Secret value.

   This links your app to Microsoft's sign-in system and gives you the necessary codes to connect it to Lovable.

4. 4

   If you chose to use your own Microsoft account settings, enter the Client ID and Client Secret into your Lovable project's Microsoft authentication settings.

   This tells Lovable how to use your specific Microsoft app registration for sign-in.

5. 5

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

   This ensures that after a user signs in with Microsoft, they are correctly sent back to your app.

6. 6

   Test the Microsoft sign-in flow in your app.

   This confirms that users can successfully sign in with their Microsoft account and appear as users in your Lovable project.

Add a Microsoft sign-in button to my app.

OAuth

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

Azure Portal

Microsoft's website where you manage all your cloud services, including settings for apps that use Microsoft sign-in.

App registration

A record in your Microsoft account that tells Microsoft about your app, so it knows which app is asking for user sign-in permissions.

Client ID (Application ID)

A unique identifier for your app, like a name tag, that Microsoft uses to recognize your app.

Client secret

A secret code, like a password, that your app uses to prove its identity to Microsoft. It should be kept confidential.

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 should send users back to after they successfully sign in to their Microsoft account.

• Forgetting to add all Lovable's Redirect URLs to your Azure app registration will cause sign-in to fail.
• If using your own credentials, your Client Secret will expire; you must create a new one in Azure and update it in Lovable before it expires, or Microsoft sign-in will stop working.
• Choosing the wrong 'Supported account types' when creating your app registration in Azure can prevent certain users (like personal accounts or work accounts) from signing in, even if your Lovable settings allow them.