Auth0-chrome alternative for login from chrome extension

SDKs/Libraries
#1

As the auth0-chrome repository is deprecated, what are my options to use auth0 login from a chrome extension?

Tried the example from the deprecated repository anyway with my fingers crossed.
But, the Login failed with the error below:

Authorization page could not be loaded.

Any help is appreciated. Thank you.

Auth0 integration into Firefox / Chrome extension
#2

Hey there!

Unfortunately we donā€™t have any content on that as of now with that repo being deprecated. I highly encourage you to place a product feedback regarding that using our product feedback form:

#3

@coolboi567 just an FYI, Iā€™m currently using REACT for my extensionā€™s options.html page, and Iā€™ve embedded my login there. Itā€™s not without itā€™s quirks (currently my redirect is not working and users must hard refresh after logging in), but login/logout authentication is functioning.

1 Like
#4

Would you be able to share some code snippets / repo to your implementation?

#5

Hi Auth0 team

I tried multiple ways to add auth0 in chrome-extension after auth0-chrome being deprecated.

  1. Login on a website using auth0-react library (works well) -> push the jwt token from web to chrome extension and store token in extension storage. Use the token to make API calls by passing in the Authorization header. Catch with this approach is -> How do I refresh my token as they will expire after some time and user will have no way to get new token?

  2. My extension is also built on React, so added auth0-react library there as well. But login on web and extension are separate and they do not sync state somehow. Not sure how to make them sync auth state.

What are the options available now to use auth0 with chrome extensions. How do we manage auth state? Any help would be appreciated.

Much Thanks

#6

Unfortunately the main place for knowledge regarding that right now is this forum. As Auth0 employees we cannot advise you on our deprecated repos as we stopped maintaining them. Sorry for the inconvenience!

#7

Hi konrad

I was able to use auth0/react sdk in both my extension and web app. I am only allowing users to login via web. After that I simply call getAccessTokenSilently on extension load which calls the authorize API and returns token after posting message on parent window.

Everything is working fine if my extension is opening on same root domain as custom domain, because i have added them in redirectURI

To allow getAccessTokenSilently call work properly on other domains like mail.google.com what redirectURI should i set in Auth0 init.

I tried setting chrome-extension://id in redirectURI but that gives error of postmessage as the response from authorize is not able to post a message on chrome-extension://id

@jannik i saw you other post to sync auth state b/w web and extension. Can you please help me out on this please?

Any help appreciated.
Thanks

#8

donā€™t know if I really understand what you are trying to achieve. I never tried to sync login state between a web app and a browser extension. Iā€™m using the ā€œloginwithpopupā€ function. Theoretically, it should be possible to sync the login state between the extension and web-app via the localstorage, but I never tried it out.
Furthermore, Iā€™m using this library: ā€˜@auth0/auth0-spa-jsā€™

#9

Thanks for the reply.

Yes, i am trying to use the same auth0 client, domain and audience for both web app and extension.

auth0/react is just a wrapper on auth0-spa-js so that should not be the problem. I am not setting the cacheLocation=localstorage as i have cookies enabled on my extension.

I am also using custom domain for auth0 APIs.

The main problem is what redirectURI should i set in the extension Auth0 configuration, as Auth0 requires us to enter the redirectURI in their dashboard. I only plan to call getAccessTokenSilently method from extension.

@leif.ross maybe you could help with this one.

Thanks
Dhruv

#10

I did not need to set a redirectURI for just using getTokenSilently - initializing it like this:

const auth0 = new Auth0Client({
    domain: auth0Domain,
    client_id: auth0ClientId,
    audience: auth0Audience,
    cacheLocation: 'localstorage',
    useRefreshTokens: true
});
#11

Okay.

Are you running the extension in the popup or inside DOM of any other website?

My extension runs in the DOM of a page (like mail.google.com) and the request to Auth0 is actually going from the mail.google.com origin. This is giving origin error as i cannot whitelist all these origins in Auth0 application.

It is working if i call the token from background script of extension, then the request always goes from origin chrome-extension://id which we can whitelist in Auth0. Saving the token in extension storage from background and then fetching it on client.

If the extension is simply inside popup.html, then the auth0 requests are always from background only.

1 Like
#12

@dhruv2204 Im seeing something similar. Are you saving oauth tokens in local storage, or are you leveraging refresh token rotation?

#13

Hi @bramses

I am not using cacheLocation="localstorage" , we are useing the default values for that.

W have enabled Refresh Token Rotation in Auth0 Application setup. Also, we managed to get this working by calling getAccesTokenSilently in background script by sending a message from chrome tab.

So request to auth0 authorize API goes from background js, and jwt token in received in background. We then save the token in extension storage and access on client from storage.

Let me know if this helps.

2 Likes
#14

Thatā€™s an awesome solution, thank you for the insight!

1 Like
#15

Teamwork makes the dreamwork!

#16

@bramses Also for handling logout, you will have to make a call from background script.
Somehow, calling auth0.logout() does not do anything :man_shrugging:

So we have to make a fetch call directly to logout API for logout to happen on extension.

const LOGOUT_URL =  `https://${authConfig.domain}/v2/logout?client_id=${authConfig.clientId}&returnTo=${encodeURIComponent(window.location.origin)}`
// returnTo to be chrome-extension://extension-id, to be whitelisted in logout URLs
export const logout = async () => {
    await auth0.logout();
    try {
      await fetch(LOGOUT_URL,{
        credentials: 'include',
        mode: 'no-cors'
      }); 
    } catch (error) {
      console.log("ERR", error);
    }
    Storage.setItems({'token': ''});
    Storage.setItems({'isAuthenticated': false});
    Storage.setItems({'user': ''});
};

Took this from @jannikā€™s post :slight_smile:

Thanks

1 Like
#17

Thanks for sharing all that with the rest of community!

#18

I outlined how I was able to make the whole thing work step by step here: Ultimate Guide to Auth0 In a Chrome Extension Popup - #2 by lvillacin

1 Like
#19

Thanks for sharing that with the rest of community!

#20

How did you call getAccessTokenSilently in background script?

To my understanding background script does not run react but auth-0/react needs to be called inside a react component.