chrome extension getting session data from website - django

Question

in my django project, i have a url that has login_required set, because i need the request.user variable in it to process some data,
i also created a simple chrome extension where i'm going to have to send requests to that django project url.
i do not want to use the username and password in the extension to login and send the request
i want to:
redirect the user when the extension is installed to the my website
they will login,
the extension will know that the user has logged in and it will get (and save) a key that i could maybe inject in the page after login is successful
the key can be used as a query parameter in the request in order to identify the user without any username and password
i'm sorry if this seems as a stupid question, but i'm very confused on how to do this
PS: i have already a system in place where the user can use a key in order to make requests without logging in,
i just need a way to open a tab when the extension is installed, and login then get the key (which is injected in the page after login), and save it to use it in the extension later.

Answer 1

When the extension is opened for the first time, I'm showing the user a login page. The login page sends the username & password to an API where they are authenticated. If the information is correct, the required user info is returned (mainly the API key). The information is then saved to local storage.
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
$.ajax({
URL : 'https://example.com/api/extension-auth/',
type: 'POST',
crossDomain: true,
data: JSON.stringify({
'username': username.value.trim(),
'password': password.value.trim(),
}),
success: res => {
if (res.api_key) {
browser.storage.sync.set({ 'user_data': {'api_key': api_key} }, () => {
// show extension main logged in page
});
}
else {
// show invalid login information alert
}
},
error: function (err) {
// show server error aler
},
});
Everytime the extension is opened the local storage is checked
browser.storage.sync.get('user_data', data => {
if (data.user_data) {
if (valid_api_key(data.user_data.api_key)) {
// show extension main logged in page
}
else {
// show login page
}
}
else {
// show login page
}
});
the valid_api_key function makes a random call to the API to check if there is not an authentication error.
Then, I use the saved API key from local storage to do API requests.