needed help with google oauth to webstudio

At a glance

The community member is trying to use the YouTube Livestreaming API in Webstudio and is facing issues with OAuth 2.0 access token refreshes. They have tried using Appwrite and Supabase, but are unsure of the code-related steps. The community members discuss that OAuth 2.0 may require a server, and Appwrite could provide guidance. They share code snippets and steps to integrate Appwrite's OAuth 2.0 functionality, including configuring the Google OAuth 2.0 provider. The community member eventually gets the Google OAuth 2.0 login page to appear, but is still facing issues with the callback URL and session management.

Useful resources

JJoqniX︲🎋🌟🌠

hi! i'm trying to use youtube livestreaming api in webstudio to dynamically change / populate data etc. ( so this needs google oauth )
so im faced with a situation where oauth 2.0 access token will be refreshes over time right? ( i did try using google playgrounds )
so i wanted to use the refreshed access token on the resouce variable to do the api request.
atm its just for me. to pull my own account's data. so i will be doing the oauth mainly!

can someone guide me through this process. if anyone here has done oauth stuff before? and integrated this on your site using webstudio!
i did follow tutorials etc - such as this https://www.youtube.com/watch?v=tgO_ADSvY1I atm im using appwrite. i did try supabase as well. but got lost.

but idk what i must do - the code wise related stuff.
and idk if i can use webstudio as backend to somehow generate the access token etc? but i believe i have to look into some services which can do this? right?

do suggest me a method which i can achieve this. due to the limitation with resource variables its hard to fetch & bind this data. but if anyone knows a way around this do let me know! thank you!!

26 comments

OOleg Isonen

I am not sure oauth 2 works without a server, maybe @Ivan Starkov knows

OOleg Isonen

if it requires server to fetch private tokens, then you need a separate backend that webstudio doesn't provide

OOleg Isonen

appwrite is a backend that should be providing you the guides

OOleg Isonen

on webstudio side there should be nothing more than an html embed with the button

OOleg Isonen

watched that video above, yes, it shows basic setup on their side but doesn't show the integration part for a frontend

OOleg Isonen

https://github.com/appwrite/sdk-for-web

OOleg Isonen

they do have all the steps

OOleg Isonen

OOleg Isonen

// Init your Web SDK
const client = new Client();

client
.setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
.setProject('455x34dfkj') // Your project ID
;

OOleg Isonen

and then https://appwrite.io/docs/products/auth/oauth2

OOleg Isonen

const account = new Account(client);

// Go to OAuth provider login page
account.createOAuth2Session(
OAuthProvider.Github, // provider
'https://example.com/success', // redirect here on success
'https://example.com/failed', // redirect here on failure
['repo', 'user'] // scopes (optional)
);

OOleg Isonen

seems failry straight forward but ofc might be too much if you have 0 coding skills

OOleg Isonen

I think the only way to give you a complete walk through is to record a video specifically using appwright and webstudio

OOleg Isonen

@John Siciliano might consider making one if demand is high enough

JJoqniX︲🎋🌟🌠

omg thank you! ill try to follow this!

JJoqniX︲🎋🌟🌠

yup that's me! i have 0 coding skills ;w; but its okie ill learn over time~ in the end learning about all of these stuff is always so fun and inspiring~ so i dont mind the long way~
i've used this this app called sammi for my streaming stuff so i've did some stuff with it. as it was more easier to do like building block type.ish . so i slowly was able to and understand conditional stuff and api stuff. that's all i know~ but yea switching from framer to webstudio. its has alot of learning curve ngl but i see myself having alot of ideas and trying to implement them into my site via webstudio so this journey is so fun!

but yea thanks for writing a written detailed guide on the oauth stuff i really appreciate it oleg! :joqnixHeart:

JJoqniX︲🎋🌟🌠

if im correct input all the javascript stuff into a html embed right? with the script tags?

JJoqniX︲🎋🌟🌠

the tag mentioned here? does webstudio have custom code before </body> ? i can put on the page itself like in webflow? ig no?
so i believe i can just use a html embed with this , on the very top ig? after the body ? ( ref 2nd image)

so when the page loads. it loads this html embed first then the rest of the stuff right? as per as how the body structure is? is it how it works within webstudio?

Attachments

JJeremy

@JoqniX︲🎋🌟🌠 , if there's a scrip that you need across on your entire site (example: analytics) you can add it to the project settings. There's a place for there.

What that snippet is saying is that you can call that CDN script on your page, but if you need to call the functions within it, then you'll need to include that scripting after this CDN link.

Attachment

JJoqniX︲🎋🌟🌠

oh! thank you!

JJoqniX︲🎋🌟🌠

oh boy! im happy to say that. ever since yesterday till till now. me was at it for a while hours. ( while watching some videos and testing other services except appwrite etc)

and it finally worked!
followed this - gemini saved me!

Plain Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  const { Client, Account, OAuthProvider } = Appwrite; // Import all

  const client = new Client();
  const projectID = 'YOUR_PROJECT_ID'; // Replace with your actual project ID

  client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject(projectID);

  const account = new Account(client);

  // Configure Google OAuth2 provider (assuming you have configured it in Appwrite)
  const provider = OAuthProvider.Google; // Use OAuthProvider.Google for Google OAuth2

  // Example: Initiate Google OAuth2 login
  account.createOAuth2Session(provider, 'https://your-website.com/callback', 'https://your-website.com/error') // Replace URLs with yours
    .then(response => {
      console.log("OAuth2 session created:", response);
      // Handle successful session creation (e.g., redirect user)
    })
    .catch(error => {
      console.error("OAuth2 session creation failed:", error);
      // Handle errors during OAuth2 login (e.g., display error message)
    });
</script>

Attachment

JJeremy

Nice work!

JJoqniX︲🎋🌟🌠

as i was watching this video where they used xano.
i had made 2 pages - one for login , and other for myaccount

so currently this code is in the login page. as a html embed, so it instantly directs me to the google oauth page as seen in the screenshot.
so now i needa figure out how i can make so that.
when i press login button. on my page. it then redirects to the google oauth.

JJoqniX︲🎋🌟🌠

and the other thing i noticed is -. since i have made a myaccount page .
i kept that as my callback url.
i used this code so it somehow catches it and logs to local storage and stuff? if it needs to be refreshed, then it redirects back to the login page.
but it seems to be not working ;w; idk . i see the request was redirected error idk why?

here's the code gemini gave me!

Plain Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  const { Client, Account } = Appwrite; // Import necessary parts

  const client = new Client();
  const projectID = 'YOUR_PROJECT_ID'; // Replace with your actual project ID

  client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject(projectID);

  const account = new Account(client);

  let refreshTokenAttempted = false; // Flag to track refresh attempt

  // Retrieve current session information
  account.getSession('current')
    .then(session => {
      console.log("Session information:");
      console.log("  Provider:", session.provider);
      console.log("  Provider UID:", session.providerUid);
      console.log("  Provider Access Token:", session.providerAccessToken);

      // Store session data in local storage (optional)
      localStorage.setItem('sessionData', JSON.stringify(session));

      // Retrieve user profile (optional)
      return account.getAccount(session.userId);
    })
    .then(userProfile => {
      console.log("User profile:", userProfile);
      // Access user data
    })
    .catch(error => {
      console.error("Error:", error);
      // Handle errors during session retrieval or profile retrieval
    });

  // Optional: Check for session expiration (assuming no built-in event)
  setInterval(() => {
    // Check if session is still valid (implementation might vary)
    // ... (e.g., call an Appwrite API endpoint requiring authentication)

    if (!refreshTokenAttempted) {
      console.log("Session might be expired. Attempting refresh...");
      refreshTokenAttempted = true; // Prevent multiple refresh attempts

      // Redirect user to login page for refresh
      window.location.href = "'https://your-website.com/login";
    }
  }, 5000); // Check every 5 seconds (adjust as needed)
</script>

Attachment

JJoqniX︲🎋🌟🌠

so yea currently stuck at this. but atleast the google oauth page showed up! im happy 😭
dunno why the app name was - appwrite.io , tho i gave a different name in google cloud for the oauth 2.0 client

JJoqniX︲🎋🌟🌠

do let me know if i needa share my build or something. or provide link to the site etc.

Add a reply

Join the Webstudio community

needed help with google oauth to webstudio