AWS Amplify Auth in Extension
It's mostly understanding the authorization flow. I am trying to use a Google Social Auth flow to sign in my user but I'm not familiar with Auth sessions and tokens.
ref: https://discord.com/channels/946290204443025438/1070188420225323038/1070188993603444757
5 Replies
Here's what I'm doing so far
1. Use chrome.identity.launchWebAuthFlow to launch an authorization flow with my AWS Amplify Cognito Auth URL https://<app id>.auth.us-west-1.amazoncognito.com/login? redirect_uri=<redirect uri of chrome extension>
2. I can successfully complete the flow and get redirected from Amplify Auth > Google > Amplify Auth > Chrome extension
3. In the chrome extension, I receive an authorization code in the redirect URL from launchWebAuthFlow. I was not sure what the purpose of that code was initially, but it seems to be an authorization code granted from AWS Cognito.
So now the question is... what do I do with the authorization code?
From my understanding, it is different from an authorization token?
Am I meant to:
1. Store that authorization code in local storage?
2. Use it to make requests to an AWS Cognito endpoint to get the user details?
And what exactly are sessions and how do I manage them?
So generally, the auth code is given to client to request for an auth token
Before digging deeper - which cognito flow is this? Is it JWT flow?
A JWT flow (or more formally, an OAuth2 flow), is a temporary access token retrieval mechanism. The idea is that each time user opens up that auth code grant flow, the auth provider (in this case, Google), did a quick handshake with Amplify Auth, to which Amplify Auth issued your client a "code" that you can then redeem for a JWT access token.
The key security feature here is that the JWT is short-lived - it carries the session and the user details with it, but it is short-lived and your client (extension) must repeat the code retrieval flow and redeem for a new JWT whenever it expires.
You shouldn't need to store the initial code, bc it's useless if not redeem within like 15 minutes or so (some providers even make it valid for 60 seconds).
What you will need to do with the code, is to use it with Amplify access token route (there should be docs about that somewhere), to redeem the code for an AccessToken. These token generally lives for 60 minutes (that's the avg length of a session), but some provider might default to 15 minutes token lifetime, but that's something generally configurable.
For the AccessToken, you can store them in chrome.storage.local for reuse but make sure to check for their expiration to redo the whole OAuth2 flow again (this is something that's abstracted away by the OAuth mechanism of chrome, IF you use it with firebase - they leverage the refresh token embedded within the chrome profile)
Now, at the JWT access token retrieval flow, some providers might allow you to request a "refresh token" -> this is a token that you can use to request a new access token. It won't expire and is the method of OAuth2 for mobile apps (which extensions should model heavily after).
- refreshtoken can be inactivated on the server side if compromised
- accessToken cannot be inactivated (i.e, their main inactivation mechanism is the expired date)
Some OAuth2 provider does allow the ability to invalidate accessToken like Auth0, but most doesn't, and I think that's non-standard ;d...
What's the diff between the code vs refresh-token: with code, you need to initiate the whole popup flow to get a new code from provider, whereas refresh-token is just an API call away.
You are actually amazing. Thank you!
Let me try working through this to see if I can implement this now
Got it working! The key is to do it in a tab page (https://docs.plasmo.com/framework/tab-pages) and not in the popup. This simplifies this tremendously as you can just treat a tabpage as a normal webpage.
Some key things to note:
1. When adding your redirectLogin and redirectLogOut URLs in Amplify, use this URL scheme instead of the normal https://<something>.domain.com/*
chrome-extension://<your chrome extension id>/tabs/loginTabPage.html/
The "/" at the end is important.
2. Once you do it in a TabPage, the Amplify Auth React library works as expected and there should be no need to deal with user session or authorization codes. However, if you find yourself dealing with that mess, check out this resource https://medium.com/codex/how-to-process-an-aws-cognito-authorization-code-grant-using-aws-amplify-b49d9ee052ca
Plasmo Docs
Tab Pages – Plasmo
Learn how to use tab pages with Plasmo to create new tab views in your browser extension.
Medium
How to Process an AWS Cognito Authorization Code Grant using AWS Am...
Most developers that work with AWS Cognito + Amplify take advantage of the built-in urlListener within Amplify which automatically…
@ObinnaAka has reached level 3. GG!