CodingGarden / listd

listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
https://twitch.tv/codinggarden
MIT License
190 stars 53 forks source link

Onboarding flow #65

Open omar2205 opened 1 year ago

omar2205 commented 1 year ago

Discussed in https://github.com/CodingGarden/listd/discussions/64

Originally posted by **omar2205** February 20, 2023 If we are building a YouTube feed, it would be helpful for the user to see the YouTube channels they have subscribed to. I was able to add more scopes to the auth with this ```ts Google({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET, authorization: { params: { scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly', } } }), ``` I'm not sure if this will count towards our API usage.

We can get extra stuff like access_token and id_token like this:

    Google({
      clientId: GOOGLE_CLIENT_ID,
      clientSecret: GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          access_type: 'offline', prompt: 'consent',
          scope:
            'openid https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
        },
      },
      // extra has id_token, access_token, refresh_token, and expires_in
      profile(profile, extra) {
        console.log({ profile, extra })
        return {
          id: profile.sub,
          name: profile.name,
          image: profile.picture,
          email: profile.email,
        }
      },
    }),

To get a user channels ref: https://developers.google.com/youtube/v3/docs/subscriptions/list

const YT_API = 'https://www.googleapis.com/youtube/v3'
const getUserSubscriptions = async (access_token: string, maxResults = 10) =>
  (await fetch(
      `${YT_API}/subscriptions?part=snippet&mine=true&maxResults=${maxResults}&access_token=${access_token}`)).json()

Refresh token https://authjs.dev/guides/basics/refresh-token-rotation

w3cj commented 1 year ago

I want to avoid asking for youtube permissions unless the user wants to use their existing subscriptions. Users should also be able to log in and use the app without sharing their subscriptions.