I've implemented login via Google OAuth2 on my website. I send an authorization code to Google and in return get the id token and refresh token (I don't care about the access token because I don't want to access Google APIs. I just need to authenticate the user and get basic info like name and email address):
async function getTokens(authorizationCode) {
try {
const response = await fetch(
`https://oauth2.googleapis.com/token`,
{
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
body: new URLSearchParams({
code: authorizationCode,
client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
client_secret: process.env.REACT_APP_GOOGLE_CLIENT_SECRET,
redirect_uri: "http://localhost:3000",
grant_type: "authorization_code"
})
}
)
return response.json()
} catch (error) {
console.log(error);
}
}
To not require the user to login twice, the accompanying Chrome extension uses the login page of the web app for its own authentication. For this, the web app sends the tokens (and expiration time) via a message to the extension:
function sendSavedTokensToExtension() {
const idToken = localStorage.getItem(Constants.KEY_ID_TOKEN)
const refreshToken = localStorage.getItem(Constants.KEY_REFRESH_TOKEN)
const expiresAt = localStorage.getItem(Constants.KEY_ID_TOKEN_EXPIRES_AT)
chrome.runtime.sendMessage(Constants.EXTENSION_ID,
{
tokens: {
id_token: idToken,
refresh_token: refreshToken,
expires_at: expiresAt
}
}
)
}
Both the web app and the extension have their own refresh logic that refreshes the id token when the expiration time is reached. Both share the same id token and refresh token. For this, they also both have to use the same client id (the extension uses the client id of the web app). It seems to work and both the web app and the extension seem to be able to refresh their session independently from each other. Is there anything wrong with sharing the refresh code this way?