[FIXED] How to authenticate users with social logins in web widget?

Issue

I have a web widget which other users can embed on to their own websites. The widget is built with vanilla JS and no external libraries, whilst I'm using a node.js backend. And the widget requires users to login to interact with it.

When logging in with email and password on the widget, I send that information to my server and return back with a token if it's a registered user.

However, I am unsure as to how I can do the same with social logins (e.g. google) without having to download any external libraries. How can I allow a user to log in to google and pass the user details back to the widget? Are there any examples of this?

• Widget - VanillaJS
• Dashboard Frontend - ReactJS
• Dashboard backend - Node.js
• Database - Supabase

Solution

yes there are examples of this here https://ui.supabase.io/components/auth#social-providers

when your user is authenticated by a social provider, the email address is provided like so:

import { Auth, Typography, Button } from '@supabase/ui'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient('https://your-project-url.supabase.co', 'PROJECT_ANON_KEY')

const Container = (props) => {
  const { user } = Auth.useUser()
  if (user)
    return (
      <>
        <Typography.Text>Signed in: {user.email}</Typography.Text>

Answered By - Greg Willson

Answer Checked By - Willingham (PHPFixing Volunteer)