Sign in with Lovable

1. 1

   Go to "Workspace settings" then "API keys & OAuth" and then "OAuth clients" to register a new OAuth client.

   This tells Lovable that your website is allowed to ask people to sign in, and you'll get a unique ID for your site.

2. 2

   When registering, choose "Single-page app" if your site doesn't have its own server, or "Web server" if it does.

   This choice affects how Lovable handles the sign-in process and security for your site.

3. 3

   Enter your website's main address (like "https://example.com") for the SDK, or the exact page people return to (like "https://example.com/callback") for OpenID Connect, into the "Redirect URIs" field.

   Lovable will only send people back to these approved addresses after they sign in, keeping your users safe.

4. 4

   Select "openid" and add "profile" for name/picture, "email" for email, and "offline" to keep people signed in longer, in the "Scopes" section.

   These choices determine what information Lovable shares with your site after someone signs in.

5. 5

   If your site has no server, add the Lovable SDK script to your page and place a special `div` tag where you want the sign-in button to appear, including your client ID and desired scopes.

   The SDK automatically creates the sign-in button and handles the sign-in process for you, making it quick to set up.

6. 6

   If your site has a server or you want full control, use an OpenID Connect library or your own code to manage the sign-in flow, starting by sending the user to Lovable's authorization page with your client ID and other details.

   This method gives you complete control over the sign-in process and is standard for sites with their own server.

7. 7

   After the user signs in, Lovable will send them back to your specified redirect URI with a code; your site then exchanges this code with Lovable for an "ID token" and other details.

   This token contains the user's information (like their unique ID, name, and email) that you requested, confirming they have signed in.

8. 8

   Use the unique user ID from the ID token to identify the person on your site and sign them in using your site's own system.

   This connects their Lovable sign-in to their account on your website.

Hey Lovable, I want to add a 'Sign in with Lovable' button to my website. My site is example.com and I want to get the user's name, email, and picture. Can you help me set up the OAuth client and give me the code for the button?

OAuth client

A special registration for your website or app that tells Lovable who you are when you ask people to sign in. It's like getting an official ID for your project.

Client ID

A unique identifier for your website or app that Lovable uses to recognize you. It's like your project's public name.

Client secret

A secret password for your website or app that only your server knows. It's used to prove your server is really your server when talking to Lovable.

Redirect URI

The exact web address on your site where Lovable sends people back after they sign in. Lovable only sends them to addresses you've pre-approved.

Scopes

Requests for specific pieces of information about the user, like their name, email, or picture. Users see these requests and agree to share them.

SDK

A set of pre-written code that you can easily add to your website to handle common tasks, like showing a sign-in button and managing the sign-in process.

OpenID Connect

A standard way for websites to let people sign in using an account from another service (like Lovable), while securely getting basic information about them.

Authorization code flow with PKCE

A secure method for signing people in, especially for apps that don't have a secret password, by using a temporary code and a special challenge to verify the request.

ID token

A secure digital message from Lovable that contains verified information about the person who signed in, such as their unique ID, name, and email.

Refresh token

A special token that allows your website to get new access tokens without asking the user to sign in again, keeping them signed in for longer.

• Not registering an OAuth client before trying to implement sign-in.
• Choosing the wrong application type (Single-page app vs. Web server) during OAuth client registration, as it cannot be changed later.
• Providing incorrect or mismatched Redirect URIs, which will prevent users from returning to your site after signing in.
• Forgetting to include `openid` in your requested scopes.
• Requesting scopes (like `profile` or `email`) that you haven't registered for your OAuth client.
• Using `http` instead of `https` for your website's address, except for local development on `localhost`.
• Exposing your `client_secret` in your website's HTML or JavaScript, as it should only be used on your server.
• Not validating the `state` parameter when a user returns from Lovable, which could allow malicious attacks.
• Not verifying the `id_token` before trusting the user's details, which is crucial for security.
• Not saving the `sub` (subject) claim as the user's permanent identifier, as other details like name or email can change.