Supabase WordPress Integration - Enable Google Login

Integrating Supabase with WordPress offers a modern, scalable way to enhance your WordPress site with powerful backend capabilities such as user authentication and real-time data handling. Let's see how this integration is done. Get the plugin: https://techcater.com Demo Video: https://www.youtube.com/watch?v=BewjtbcFZ3M The Google login feature is added in SupaWP v1.2.0 Why Add Google Login to Your WordPress Site? User Convenience: Most users have Google accounts, so Google login reduces friction and increases sign-up rates. Security: Google OAuth provides robust, industry-standard security for authentication. Centralized User Management: Supabase centralizes authentication and user data, making it easier to manage across multiple platforms. Step-by-Step Guide: Adding Google Login via SupaWP Set Up Google OAuth Credentials Go to the Google Cloud Console. Navigate to APIs & Services > Credentials. Click Create Credentials and select OAuth Client ID. For Application Type, choose Web Application. Under Authorized JavaScript origins, add your WordPress site URL. Under Authorized redirect URIs, add the callback URL provided by Supabase (found in your Supabase Dashboard’s Google Auth Provider section). Note the generated Client ID and Client Secret. Configure Google Provider in Supabase In your Supabase Dashboard, go to Authentication > Sign In / Providers > Google. Enter the Client ID and Client Secret you obtained from Google Cloud. Remember to add your site URL, so it can be redirected correct on production. Connect Supabase to WordPress via SupaWP In your WordPress admin, go to the SupaWP plugin settings. Make sure that you're using SupaWP v1.2.0 Enable Google Login as one of the login method Add Google Login Button to Your WordPress Site by placing the [supawp_auth] shortcode on your login or registration page. The login form will now include a “Sign in with Google” option. When click “Sign in with Google”, you should be redirected to Google’s consent screen, then back to your WordPress site upon successful login. Bonus: manually adding Google Sign In button (JavaScript) Here’s a minimal example using the Supabase JS client to trigger Google login when a button is clicked: Sign in with Google // Initialize Supabase client const supabase = supabase.createClient( 'https://YOUR_PROJECT_ID.supabase.co', // Replace with your Supabase project URL 'YOUR_PUBLIC_ANON_KEY' // Replace with your Supabase public anon key ); document.getElementById('google-login-btn').addEventListener('click', async () => { // Redirects to Google OAuth const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin // Adjust if you want a custom redirect } }); if (error) { alert('Login error: ' + error.message); } // The user will be redirected to Google and then back to your site }); Key points: Replace YOUR_PROJECT_ID and YOUR_PUBLIC_ANON_KEY with your actual Supabase project details. The redirectTo option defines where users are sent after logging in with Google. This button can be placed anywhere in your WordPress theme or plugin that allows custom HTML/JS. Tips & Troubleshooting Custom Domains: If you use a custom domain with Supabase, make sure it’s added to your Google OAuth consent screen’s authorized domains. Scopes: Default scopes for Google login should include openid, email, and profile. Local Development: For testing locally, add http://localhost to your authorized origins in Google Cloud Console. Conclusion Integrating Google login with Supabase and SupaWP brings modern, secure authentication to WordPress. This setup not only improves user experience but also centralizes and secures your user management using the latest cloud-native technologies. For more details, refer to the official Supabase documentation on Google Auth and follow the SupaWP plugin’s instructions in your WordPress dashboard.

May 10, 2025 - 18:57

Supabase WordPress Integration - Enable Google Login

Integrating Supabase with WordPress offers a modern, scalable way to enhance your WordPress site with powerful backend capabilities such as user authentication and real-time data handling. Let's see how this integration is done.

Get the plugin: https://techcater.com

Demo Video: https://www.youtube.com/watch?v=BewjtbcFZ3M

The Google login feature is added in SupaWP v1.2.0

Why Add Google Login to Your WordPress Site?

User Convenience: Most users have Google accounts, so Google login reduces friction and increases sign-up rates.
Security: Google OAuth provides robust, industry-standard security for authentication.
Centralized User Management: Supabase centralizes authentication and user data, making it easier to manage across multiple platforms.

Step-by-Step Guide: Adding Google Login via SupaWP

Set Up Google OAuth Credentials

Go to the Google Cloud Console.
Navigate to APIs & Services > Credentials.
Click Create Credentials and select OAuth Client ID.
For Application Type, choose Web Application.
Under Authorized JavaScript origins, add your WordPress site URL.
Under Authorized redirect URIs, add the callback URL provided by Supabase (found in your Supabase Dashboard’s Google Auth Provider section).

Note the generated Client ID and Client Secret.

Configure Google Provider in Supabase

In your Supabase Dashboard, go to Authentication > Sign In / Providers > Google.
Enter the Client ID and Client Secret you obtained from Google Cloud.

Remember to add your site URL, so it can be redirected correct on production.

Connect Supabase to WordPress via SupaWP

In your WordPress admin, go to the SupaWP plugin settings. Make sure that you're using SupaWP v1.2.0
Enable Google Login as one of the login method

Add Google Login Button to Your WordPress Site by placing the [supawp_auth] shortcode on your login or registration page.

The login form will now include a “Sign in with Google” option. When click “Sign in with Google”, you should be redirected to Google’s consent screen, then back to your WordPress site upon successful login.

Bonus: manually adding Google Sign In button (JavaScript)

Here’s a minimal example using the Supabase JS client to trigger Google login when a button is clicked:


<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

<button id="google-login-btn">Sign in with Google</button>

<script>
  // Initialize Supabase client
  const supabase = supabase.createClient(
    'https://YOUR_PROJECT_ID.supabase.co', // Replace with your Supabase project URL
    'YOUR_PUBLIC_ANON_KEY' // Replace with your Supabase public anon key
  );

  document.getElementById('google-login-btn').addEventListener('click', async () => {
    // Redirects to Google OAuth
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: window.location.origin // Adjust if you want a custom redirect
      }
    });
    if (error) {
      alert('Login error: ' + error.message);
    }
    // The user will be redirected to Google and then back to your site
  });
</script>

Key points:

Replace YOUR_PROJECT_ID and YOUR_PUBLIC_ANON_KEY with your actual Supabase project details.
The redirectTo option defines where users are sent after logging in with Google.
This button can be placed anywhere in your WordPress theme or plugin that allows custom HTML/JS.

Tips & Troubleshooting

Custom Domains: If you use a custom domain with Supabase, make sure it’s added to your Google OAuth consent screen’s authorized domains.
Scopes: Default scopes for Google login should include openid, email, and profile.
Local Development: For testing locally, add http://localhost to your authorized origins in Google Cloud Console.

Conclusion

Integrating Google login with Supabase and SupaWP brings modern, secure authentication to WordPress. This setup not only improves user experience but also centralizes and secures your user management using the latest cloud-native technologies.

For more details, refer to the official Supabase documentation on Google Auth and follow the SupaWP plugin’s instructions in your WordPress dashboard.