⚡ Using Plasmo with Auth0, React a backend and content scripts
Hey everyone!
I'm currently trying to build a Chrome Extension using Plasmo, Auth0, React, a dedicated backend, and content scripts.
I'm really not sure what would be the best architecture here.
Basically:
Across the whole extension, we need to check the auth state:
- In the popup (conditional UI, logout button, remote settings with API calls using Auth0 access token).
- In content scripts (conditional UI, remote API calls using Auth0 access token).
My plan was to:
- Leverage the storage as the global state for content scripts & the popup.
We would have something like:
In all the content scripts, we would check from the storage if the user is logged in or not ( access token != undefined)
If they are not, we would show a button "Sign in" that redirects to a tab page to login with Auth0.
In the popup, we would also check from the storage if the user is logged in or not.
If they are not, we would show a button "Sign in" that redirects to a tab page to login with Auth0.
This tab page will trigger the sign-in or sign-up Auth0 flow with a redirect, and then store the access token in the storage.
Anytime we need to do an API call to our backend, we would get the access token from the storage (content scripts, popup) and use it.
--- Questions
If the extension reloads, we need to fetch another access token with Auth0, how to deal with that?
Would it be better to deal with all API calls & authentification in a Background Service Worker and then use messaging in content scripts & the popup to check the authentification state / make API calls ?
Is it safe to use the storage to store sensitive information like the access token & userId?
Is there any gotcha with this approach?
I'm currently trying to build a Chrome Extension using Plasmo, Auth0, React, a dedicated backend, and content scripts.
I'm really not sure what would be the best architecture here.
Basically:
Across the whole extension, we need to check the auth state:
- In the popup (conditional UI, logout button, remote settings with API calls using Auth0 access token).
- In content scripts (conditional UI, remote API calls using Auth0 access token).
My plan was to:
- Leverage the storage as the global state for content scripts & the popup.
We would have something like:
In all the content scripts, we would check from the storage if the user is logged in or not ( access token != undefined)
If they are not, we would show a button "Sign in" that redirects to a tab page to login with Auth0.
In the popup, we would also check from the storage if the user is logged in or not.
If they are not, we would show a button "Sign in" that redirects to a tab page to login with Auth0.
This tab page will trigger the sign-in or sign-up Auth0 flow with a redirect, and then store the access token in the storage.
Anytime we need to do an API call to our backend, we would get the access token from the storage (content scripts, popup) and use it.
--- Questions
If the extension reloads, we need to fetch another access token with Auth0, how to deal with that?
Would it be better to deal with all API calls & authentification in a Background Service Worker and then use messaging in content scripts & the popup to check the authentification state / make API calls ?
Is it safe to use the storage to store sensitive information like the access token & userId?
Is there any gotcha with this approach?
