Hey there! In this friendly guide, we'll walk through the process of integrating LinkedIn OAuth into your Xano application. This will allow your users to sign up and log in using their LinkedIn accounts, providing a seamless authentication experience. Let's get started!
Step 1: Install the LinkedIn OAuth Extension
- Head over to the LinkedIn OAuth extension page in the Xano Marketplace.
- Click the blue "Get Extension" button on the right side.
- Confirm by clicking "Get" again in the popup window.
- Once the extension is added to your instance, click the green "Install Extension" button.
- Review the data that will be merged into your user database table schema and click "Install."
Step 2: Configure LinkedIn OAuth
- After installation, you'll see instructions to follow on the LinkedIn Developers site.
- Click the "Configure" button in Xano and keep this window open for later.
- Go to linkedin.com/developers (create an account if you don't have one).
- Click "Create App" and fill in the required fields:
- App Name: Give your app a name (e.g., "Demo").
- LinkedIn Page: Search for your company's LinkedIn page and select it.
- Upload a logo for your app.
- Agree to the terms and click "Create App."
- Go to the "Products" tab and select "Sign In with LinkedIn." Read and agree to the terms, then click "Add Product."
- Wait for the review process to complete (it should only take a few moments).
Step 3: Obtain Client ID and Client Secret
- In the "Auth" section of your LinkedIn app, copy the "Client ID."
- Go back to the "Configure" window in Xano and paste the Client ID in the matching field.
- Return to the LinkedIn "Auth" section, reveal the "Client Secret," and copy it.
- Paste the Client Secret in the corresponding field in Xano's "Configure" window.
- Click "Update" to save the configuration.
Step 4: Set Up the Live Demo (Optional)
- In Xano, go to the "API" page and locate the new "LinkedIn OAuth" API group that came with the extension.
- Click "Explore" and copy the "Base Request URL" from the right side.
- Open the Live Demo (accessible from the "Explore Live Demo" button after installing the extension).
- In the Live Demo, go to "Settings" and paste the copied Base Request URL into the "Xano Base URL" field. Click "Update Settings."
- Copy the "Authorized Redirect URI" from the Live Demo.
- Return to your LinkedIn app's "Auth" section and add the copied URI to the "Authorized Redirect URIs" field. Click "Update."
Step 5: Test the Integration
- In the Live Demo, you'll see three options: "Continue with LinkedIn," "Sign Up with LinkedIn," and "Log In."
- Click "Sign Up with LinkedIn" to initiate the sign-up process.
- You'll be redirected to LinkedIn, where you can enter your credentials and allow the app to access your LinkedIn information.
- After granting permission, you'll be redirected back to the specified URL (which would be your application's page in a real-world scenario).
And there you have it! You've successfully integrated LinkedIn OAuth with your Xano application. Your users can now enjoy the convenience of signing up and logging in with their LinkedIn accounts.
Remember, this guide is tailored for a broad audience, including no-code enthusiasts, citizen developers, traditional developers, startups, and small businesses. Feel free to adjust the language and level of detail based on your specific target audience.