Context

My HapiJS web application is currently using OAuth 2.0 to access Google APIs. Once a user authenticates in the app, the server generates a JSON Web Token (JWT) which is stored on the client and sent back in the Authorization header of subsequent requests.

What I would like to accomplish

I now would like to use the same steps (authorization + creation of a JWT) with my Google Chrome extension which syncs data back to the app via a REST endpoint.

Current Thoughts

My idea is to use the same OAuth authorization as I have in my application to generate a JWT and then to save this JWT into the Chrome extension. This JWT will then be passed with each request from my chrome extension to my application to validate the request.

Unfortunately, it seems that the Chrome extension is using its own authorization through the Chrome Identity API and won’t let me use the authentication process I had in mind.

The diagram below describes the steps I’m envisioning to get the JWT created on my application then saved on my chrome extension (and also points to where the problem lies):

The Question

So my question is: Is there another or a better way to store a JWT created on my application to my Chrome extension?

Hope my explanation is clear enough

Context

My HapiJS web application is currently using OAuth 2.0 to access Google APIs. Once a user authenticates in the app, the server generates a JSON Web Token (JWT) which is stored on the client and sent back in the Authorization header of subsequent requests.

What I would like to accomplish

I now would like to use the same steps (authorization + creation of a JWT) with my Google Chrome extension which syncs data back to the app via a REST endpoint.

Current Thoughts

My idea is to use the same OAuth authorization as I have in my application to generate a JWT and then to save this JWT into the Chrome extension. This JWT will then be passed with each request from my chrome extension to my application to validate the request.

Unfortunately, it seems that the Chrome extension is using its own authorization through the Chrome Identity API and won’t let me use the authentication process I had in mind.

The diagram below describes the steps I’m envisioning to get the JWT created on my application then saved on my chrome extension (and also points to where the problem lies):

The Question

So my question is: Is there another or a better way to store a JWT created on my application to my Chrome extension?

Hope my explanation is clear enough

• javascript
• authentication
• google-chrome-extension
• oauth
• jwt

• Have you tried storage API? developer.chrome.com/extensions/storage – Moin Commented Nov 23, 2015 at 16:00
• Show the relevant code that tries to obtain JWT. – woxxom Commented Nov 23, 2015 at 16:14
• Reproduction steps/sample app would be nice It's not clear to me if the issue is getting the JWT to the extension or getting the extension to use the JWT – Number 9 Commented Nov 23, 2015 at 18:12
• 1 chrome.identity.launchWebAuthFlow returns you the redirect url, which presumably has your JWT somewhere. – Steve Campbell Commented Nov 23, 2015 at 22:10
• Please find the example of the code here We are working on JWT issue on the authentication branch. – Anita Commented Nov 24, 2015 at 11:02

4 Answers 4

You can use your localStorage to save your jwt from the web app, then, if your extension runs on the same domain, you can access saved information from the localStorage through a content script, that gets injected in that page. You can communicate with your popup using the Message Passing API for Chrome extensions.

The problem with this approach comes with the fact that saving sensible information like user info (which is encoded in the jwt) is frowned upon due to security concerns.

Ideally, you should have a server which handles the authentication back and forth, saves the information and emits a session token for its clients, which then you can save in the localStorage if you wish.

If you want your popup.html to contain a link to allow users to open (leading to OAuth Google in your model), you need more work than a simple anchor link.

You will need to add event listeners to the link and use chrome.tabs.create.

Here is a demo code:

popup.html

<html>
    <body>
        <span class="link" data-href="https://www.google.com">link</span>
        <span class="link" data-href="https://www.bing.com">link</span>
        <span class="link" data-href="https://www.yahoo.com">link</span>

        <script>

            //get all links
            var links = document.getElementsByClassName('link');

            //loop through each link
            for (var ii = 0, nn = links.length; ii < nn; ii++)
            {
                //add listener
                links[ii].addEventListener('click', function(e)
                {
                    //grab link
                    var url = this.getAttribute('data-href');

                    //open link in new tab using chrome.tabs.create method
                    chrome.tabs.create({url:url});
                });
            }
        </script>
    </body>
</html>

I think you could use localStorage (or a library that do the same but could work better for your code)

Without code, i can't do better for you bro, sorry

Did you try to use localStorage?

You can save the token like:

localStorage.setItem('token', 'abcde')

and can retrieve

localStorage.getItem('token')

but the information will be lost if reloads the page.