Let users login with their YouTube accounts and fetch a list of videos they've uploaded.
This workflow step allows you to integrate the YouTube authentication event when registering a new user, or logging in an existing user.
Allows the Bubble editor to verify the correct social platform to login/signup the user.
When adding dynamic data, this operator allows you to fetch and display content from a user’s connected YouTube account.
The unique ID of a YouTube video.
The title displayed on the public YouTube video.
The description field of a YouTube Video.
The image file destination URL storing the thumbnail image.
Once you’ve installed the YouTube plugin, you’ll need to create an OAuth credential within your Google Developer Console. Within your application project, select the ‘create credentials’ button, then choose the ‘OAuth client ID’ option.
From here, you’ll need to configure your application settings, as well as add a relevant redirect URI.
The URI value will be the link to the page in your application that a user will be redirected to once their account is validated.
Note: It’s also possible to enable a generic redirect URL within the Bubble plugin settings itself.
After saving your OAuth configurations, copy both the client ID and client secret key into their relevant fields within your YouTube plugin.
- The YouTube secret key will be added to the ‘App secret’ field of your plugin settings.
- The YouTube client ID will be added into the ‘App ID/App API’ of your plugin.
After configuring your OAuth credentials, you can now use the ‘signup/login with social network’ step within a workflow. From the event dropdown menu, you’ll see an option to select the YouTube OAuth provider. This event can be added to an element like a login button.
After a user clicks this button, they’ll be redirected to a Google portal where they can verify their account, then be redirected back to the destination URI of your application.
Now, you can choose to display videos from a user’s YouTube account. If you’d like to display a list of a user’s videos within a repeating group, configure the type of content to be ‘YouTube video’, then set the data source to be the ‘current user’s YouTube videos’.
Within each repeating group cell, you can then display data about each video by selecting the ‘current cell’s YouTube video’s’ operator.
When testing your application in development mode, you’ll need to verify that the login page matches the exact same value as the redirect URI you added in your OAuth credentials.
For example, your redirect URI might be configured as: https://your-app-name.bubbleapps.io/version-test/login - but by default, the Bubble page preview will add an additional string for the debugger: https://your-app-name.bubbleapps.io/version-test/login?debug_mode=true.
Simply remove the additional debugger URL string to resolve this error.