YouTube

Let users login with their YouTube accounts and fetch a list of videos they've uploaded.

Signup/login with a social network

This workflow step allows you to integrate the YouTube authentication event when registering a new user, or logging in an existing user.

OAuth provider - YouTube

Allows the Bubble editor to verify the correct social platform to login/signup the user.

Current user’s YouTube

When adding dynamic data, this operator allows you to fetch and display content from a user’s connected YouTube account.

YouTube video’s ID

The unique ID of a YouTube video.

YouTube video’s title

The title displayed on the public YouTube video.

YouTube video’s description

The description field of a YouTube Video.

YouTube video’s thumbnail URL

The image file destination URL storing the thumbnail image.

Setup

Configuring your API

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.

For reference:

• 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.

Logging a user in through YouTube

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.

FAQ

When testing my YouTube OAuth experience, it says I don’t have permission to login through the application account.

Before testing your application in development, you’ll need to provide access to a test user by whitelisting their email in your console settings here

When testing my OAuth login, I keep receiving a ‘Error 400: redirect_uri_mismatch’ message. What’s causing this to occur?

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.