McJezus
McJezus
PostsComments
PD🧩 Plasmo Developers
Created by Asif on 1/3/2024 in #👟framework
Google & Facebook OAuth without firebase
@Asif I'm actually wrong in my explanation. The getAuthToken returns an OAuth2 token which is also cached by the identity API. This is given in the jsdoc for the function: 
function chrome.identity.getAuthToken(details: chrome.identity.TokenDetails, callback: (token?: string, grantedScopes?: string[]) => void): void (+1 overload)
------------------------------------
Gets an OAuth2 access token using the client ID and scopes specified in the oauth2 section of manifest.json. The Identity API caches access tokens in memory, so it's ok to call getAuthToken non-interactively any time a token is required. The token cache automatically handles expiration. For a good user experience it is important interactive token requests are initiated by UI in your app explaining what the authorization is for. Failing to do this will cause your users to get authorization requests, or Chrome sign in screens if they are not signed in, with with no context. In particular, do not use getAuthToken interactively when your app is first launched. If callback is not provided, the function returns a Promise that resolves with the token.

@param details — Token options.

@param callback — Called with an OAuth2 access token as specified by the manifest, or undefined if there was an error.
function chrome.identity.getAuthToken(details: chrome.identity.TokenDetails, callback: (token?: string, grantedScopes?: string[]) => void): void (+1 overload)
------------------------------------
Gets an OAuth2 access token using the client ID and scopes specified in the oauth2 section of manifest.json. The Identity API caches access tokens in memory, so it's ok to call getAuthToken non-interactively any time a token is required. The token cache automatically handles expiration. For a good user experience it is important interactive token requests are initiated by UI in your app explaining what the authorization is for. Failing to do this will cause your users to get authorization requests, or Chrome sign in screens if they are not signed in, with with no context. In particular, do not use getAuthToken interactively when your app is first launched. If callback is not provided, the function returns a Promise that resolves with the token.

@param details — Token options.

@param callback — Called with an OAuth2 access token as specified by the manifest, or undefined if there was an error.
15 replies
PD🧩 Plasmo Developers
Created by Asif on 1/3/2024 in #👟framework
Google & Facebook OAuth without firebase
No it is in my popup file. The OAuthLogin is a simple rtk mutation that calls a back-end route. It looks like this: 
 OAuthLogin: builder.mutation<LoginSuccessResponse, OAuthBody>({
      query: (body) => ({
        url: `${authRouteName}/oauth`,
        method: "POST",
        body,
      }),
      onQueryStarted: async (_args, { dispatch, queryFulfilled }) => {
        try {
          const result = await queryFulfilled;
          if (result.data) {
            // do something here if needed
          }
        } catch (e) {
          // Catch the error
        }
      },
    }),
 OAuthLogin: builder.mutation<LoginSuccessResponse, OAuthBody>({
      query: (body) => ({
        url: `${authRouteName}/oauth`,
        method: "POST",
        body,
      }),
      onQueryStarted: async (_args, { dispatch, queryFulfilled }) => {
        try {
          const result = await queryFulfilled;
          if (result.data) {
            // do something here if needed
          }
        } catch (e) {
          // Catch the error
        }
      },
    }),
This can be exchanged for any function that makes a request to your back-end. It sends the token we received from the login to the back so it can exchange it for an access token.
15 replies
PD🧩 Plasmo Developers
Created by Asif on 1/3/2024 in #👟framework
Google & Facebook OAuth without firebase
Sure thing. I am using this in the popup directly and not in the background: 
 const handleOAuthLogin = async () => {
    if (busy) return
    setBusy(true)
    chrome.identity.getAuthToken(
      {
        interactive: true
      },
      (token) => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message)
          return
        }
        // This is a function I am using to call my backend with the token, 
        // which will then be exchanged for an oauth token
        OAuthLogin({ 
          provider: "google",
          token
        })
          .unwrap()
          .catch((err) => {
            toast.error(err.data.message)
          })
          .finally(() => {
            setBusy(false)
          })
      }
    )
  }
 const handleOAuthLogin = async () => {
    if (busy) return
    setBusy(true)
    chrome.identity.getAuthToken(
      {
        interactive: true
      },
      (token) => {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError.message)
          return
        }
        // This is a function I am using to call my backend with the token, 
        // which will then be exchanged for an oauth token
        OAuthLogin({ 
          provider: "google",
          token
        })
          .unwrap()
          .catch((err) => {
            toast.error(err.data.message)
          })
          .finally(() => {
            setBusy(false)
          })
      }
    )
  }
15 replies
PD🧩 Plasmo Developers
Created by Asif on 1/3/2024 in #👟framework
Google & Facebook OAuth without firebase
@Asif Which browser are you using? There is a bug in some browsers that use Chromium, like Brave, where it fails when encoding the URL for the OAuth, so it fails with that error. When I moved to Chrome specifically it worked. If you still have a problem I will explain to you what I did for Google OAuth :)
15 replies