Add guide for integration with Chrome Extension

[vikasr111]

Question 💬

I am trying to use next-auth authentication from my chrome extension. I have spent numerous hours looking into different approaches but hitting in the wall and couldn't find a way to implement. I have implemented the next-auth as part of my NextJS app and trying to use the endpoint '/api/auth/session' to authorize from the Chrome extension. But this is always throwing CORS error. I have tried bypassing CORS by allowing all origins but no luck.

I am using Prisma adapter with MongoDB and JWT strategy.

secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
    maxAge: THIRTY_DAYS,
    updateAge: THIRTY_MINUTES,
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },

I have noticed that ShareGPT extension (https://github.com/domeccleston/sharegpt) somehow got this working, but I couldn't figure it out. I wish there was some guide as part of next-auth docs. Please help me figure this out.

How to reproduce ☕️

Call the session API from chrome extension which is running in the tab of different origin.

fetch("https://example.com/api/auth/session", {
mode: "cors",
credentials: "include"
}).then(async (res) => {
  const json = await res.json();
  console.log(json)
})

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[andresgutgon]

Interested in this too!

[andresgutgon]

Uhh I found this. Sounds interesting. Didn't check yet domeccleston/sharegpt#23

[tuliren]

I copied ShareGPT's approach and it works for me. Here are what I found:

• Calling the session endpoint only works if the call is initiated from the popup or background script.
  • ShareGPT does it in the popup as well.
  • I could not make it work from the content script. Calling external endpoints from the content script is not encouraged any way. So I always do the call through background.
• The endpoint's base URL should be included in the host_permissions in the manifest.json file.

[andresgutgon]

Calling external endpoints from the content script is not encouraged any way.

Oh, that's not good in my case 😅

I guess all communication between content script UI has to be done with events?
I'll keep investigating. Thanks for the info!

[yassinebridi]

Please, keep us updated guys 😄.

[imprakharshukla]

Hey! I was looking into this today and implement a basic auth similar to shareGPT but couldn't really understand the use of storing the CSRF token in a hidden input?
Refer here- https://github.com/domeccleston/sharegpt/blob/b36ab4cb440c57b16801bbccd0a6ca0306e7c967/extension/popup.js#L4

[andresgutgon]

The CSRF is security measure to ensure that who is doing the request is the one that is on the side. So before login with Google (or Twitter) the CSRF token is sent as a hidden input in the POST request.

[imprakharshukla]

Understood! Thanks for the insight. Also, I was playing around with it a bit and made a few requests to the server and everything. Though I was unsure about the issue with security, suppose if I get the session with the session API endpoint of next-auth and make a request to my server with the UID of the user, doesn't that sound like a security nightmare? I mean, what if the user switches the UID in the request?

So I was wondering of an approach where I get the session token itself and then parse the UID of the user in my backend, that will make it more secure. Though I tried making it work, but it does not seem to work as expected with editing the authOptions like-

    export const authOptions: NextAuthOptions = {
        callbacks: {
            session: ({session, user, token}) => ({
                ...session,
                user: {
                    ...session.user,
                    session_token: token,
                    id: user.id,
                },
            }),
        },
        adapter: PrismaAdapter(prisma),
        providers: [
            GoogleProvider({
                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                clientId: env.GOOGLE_CLIENT_ID,
                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                clientSecret: env.GOOGLE_CLIENT_SECRET,
            })
            /**
             * ...add more providers here.
             *
             * Most other providers require a bit more work than the Discord provider. For example, the
             * GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
             * model. Refer to the NextAuth.js docs for the provider you want to use. Example:
             *
             * @see https://next-auth.js.org/providers/github
             */
        ],
    };

I still wasn't able to see the session Token in the response despite session_token: token,. Thank you for the help, forgive me for these silly questions as I'm very new to Next-Auth.

ps- I am using the T3 stack.

[andresgutgon]

Hi, this weekend I had the time to investigate this. I think I understood a couple of things about how cookies works in general and with NextJS auth in particular. And how they need to be configured from a Chrome extension.

I wrote a discussion about it. Let me know what you think:
#8045

[andresgutgon]

Calling external endpoints from the content script is not encouraged any way. So I always do the call through background.

I managed to call my API from a content script. I think if done right is ok. You can read a longer explanation here

But the gist is to enforce your API to handle CORS by only allowing some trusted sites to call your api. In my case this is what I want.

I think Google would not allow a CORS like this with asterisk *

"Access-Control-Allow-Origin": "*"

I think that's a security risk for your API

[stale[bot]]

It looks like this issue did not receive any activity for 60 days. It will be closed in 7 days if no further activity occurs. If you think your issue is still relevant, commenting will keep it open. Thanks!

[livingforjesus]

Ok

[shivamragnar]

Ok so few issues here

• Getting session via /api/auth/session is only possible if you are logged in already
• To login, you will need to create a web page for NextJS app, login on the webpage
• Fire /api/auth/session to get the session

Suppose you are not logged in to neither Chrome extension nor the web page

How should chrome extension check if there was a login, when it should fire /api/auth/session endpoint and in what intervals?

There should be a way to let chrome extension know that there was a login so that we can login the user in Chrome extension aka sync.

Similar goes for the logout, if we can have a way to let chrome extension know, that there was a logout.

But if user wants to logout from chrome extension say popup.html has a Logout button. How should that be implemented.

Some of these questions might be not that great as I am new to chrome extension auth. But any help would be useful.

[siegerts]

Hi All - just wanted to share a Chrome extension, dossi, that I had build and just open sourced that uses Next Auth for auth in combination with a web app for managing the Auth flow, etc.

• Browser extension - https://github.com/siegerts/dossi-ext
• Web app and API - https://github.com/siegerts/dossi-app