Xano - Google OAuth Extension Demo

Welcome to this friendly guide on how to set up and use the Google OAuth extension from the Xano marketplace. We'll walk through the installation, configuration, and testing process, ensuring you can seamlessly integrate Google's authentication services into your Xano application.

Installation

1. Head over to the Google OAuth extension page on the Xano marketplace.
2. Click the green "Install Extension" button.
3. When prompted, select the database table where you want to store your user login and signup information. Typically, this would be the "user" table.
4. Click "Install" to complete the installation process.

Configuration

After installation, you'll notice a blue message indicating that the extension needs configuration. Follow these steps:

1. Click the blue "Configure" button to open the configuration window.
2. You'll need to provide a Client ID and Client Secret. To obtain these, follow the installation instructions on the extension page:

• Log in to the Google Developer Console and create a new project.
• Configure the OAuth consent screen, choosing the "External" user type.
• Enter basic information like the application name and authorized domain (you can use your Xano demo domain for testing purposes).
• Navigate to the "Credentials" page and create new OAuth client ID credentials.
• Select the application type as "Web Application."
• Provide a name for your credentials and click "Create."
• Copy the generated Client ID and Client Secret.

1. Back in the Xano configuration window, paste the Client ID and Client Secret into their respective fields.
2. Click "Update" to save the configuration.

Testing

With the extension installed and configured, it's time to test it out using the demo:

1. Open the demo page for the Google OAuth extension (the link is provided on the extension page).
2. When prompted, enter your Xano base URL. You can find this by going to the API page in Xano, navigating to the newly created "Google OAuth" group, and copying the base request URL.
3. Paste the base URL into the demo page and click "Update Settings."
4. Follow the remaining instructions by copying the provided authorized redirect URI and pasting it into the OAuth client ID credentials on the Google Developer Console.
5. Save the changes on the Google Developer Console.
6. Return to the demo page and click "Sign Up with Google."
7. Choose your Google account and complete the sign-up process.
8. You'll see a success message confirming that you've signed up through Google using Xano as your backend.
9. Log out and try signing in using the "Sign In" button and your Google account.

Congratulations! You've successfully integrated Google OAuth with your Xano application. You can now leverage Google's authentication services to provide a seamless login and signup experience for your users.

Remember, this guide is tailored for both non-technical users and developers, so feel free to reach out if you have any questions or need further assistance.