sion0921 Comments - Answer Overflow

sion0921

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

I would greatly appreciate it if @miho could provide input on whether using getSessionId from 'wasp/client/api' as the primary method for authentication and authorization is appropriate. Mate @miho could you please take a look at this issue?

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

I think the session ID is limited to the client side of the website. While I might be mistaken, I haven't discovered a method to generate it on the server side.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

 jwt.sign(userPayload, 'your-secret-key');

 jwt.sign(userPayload, 'your-secret-key');

This code snippet from the AI answer will generate a JWT token in a completely different format compared to what you get from sessionId. So, ynfortunately, no, this method won't generate a valid token to access context.user.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

@Sven The purpose of this thread is to understand how to access 'context.user'. And I think its partially solved ✅ You can access it from the frontend using 'getSessionId()', then from your Chrome extension when making a request to your custom API endpoint. You will need to use that token to gain access to 'context.user'. Here's how I send the fetch request (google chrome extension code):

const { extensionToken } = await browser.storage.local.get(
          "extensionToken"
        );
if (!extensionToken) {
          throw new Error("No extension token found");
}
const response = await fetch(SERVER_API_URL[mode], {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${extensionToken}`,
          },
          body: JSON.stringify({ payload: { message: textContent } }),
});

const { extensionToken } = await browser.storage.local.get(
          "extensionToken"
        );
if (!extensionToken) {
          throw new Error("No extension token found");
}
const response = await fetch(SERVER_API_URL[mode], {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${extensionToken}`,
          },
          body: JSON.stringify({ payload: { message: textContent } }),
});

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

export const yourEndpoint = async (req, res, context) => {
  if (!context.user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

export const yourEndpoint = async (req, res, context) => {
  if (!context.user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

😆

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

Other people have accomplished this using custom endpoints and email verification. I cannot incorporate extensive custom logic into every request because my extension needs to respond quickly. Hence, the name of my SaaS is SpellFast. My only feasible option is to implement the excisting Wasp authentication mechanism to maintain speed.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

@miho "Is it possible to prevent getSessionId from 'wasp/client/api' from expiring? 👉👈

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

I logged out and back in, yet the session ID bearer token remained active. After restarting both the Wasp server and the database, everything functioned as expected. Generating a new session ID didn't invalidate the old one, which continued to work. Initially, everything appeared fine, but after approximately ten minutes, it failed, requiring me to reactivate the extension 🤷‍♀️

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

No idea. I just got it working though. I'll test and see.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

Within this page, use the session ID to send it over to your Chrome extension as follows:

import { getSessionId } from 'wasp/client/api';
...
useEffect(() => {
    const activateExtension = async () => {
        try {
          const token = getSessionId(); // this will be the token which allows getting context.user
          chrome.runtime.sendMessage(
            import.meta.env.REACT_APP_EXTENSION_ID, // to send message u need extension id
            { action: 'saveExtensionToken', token }, // use background.js script to fetch it
            (_response) => {
                console.log('Token sent to extension successfully');
              }
            }
          );
        } catch (error) {
          console.error('Failed to generate extension token:', error);
          setActivationStatus('error');
        }
      }
    };

    activateExtension();
  }, [user, isExtensionInstalled, activationStatus]);

import { getSessionId } from 'wasp/client/api';
...
useEffect(() => {
    const activateExtension = async () => {
        try {
          const token = getSessionId(); // this will be the token which allows getting context.user
          chrome.runtime.sendMessage(
            import.meta.env.REACT_APP_EXTENSION_ID, // to send message u need extension id
            { action: 'saveExtensionToken', token }, // use background.js script to fetch it
            (_response) => {
                console.log('Token sent to extension successfully');
              }
            }
          );
        } catch (error) {
          console.error('Failed to generate extension token:', error);
          setActivationStatus('error');
        }
      }
    };

    activateExtension();
  }, [user, isExtensionInstalled, activationStatus]);

Use background.js script to save token in browser storage and utilize it for requests to custom API endpoints.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?

This will redirect to the login page or, if you are already logged in, to the extension activation page. This page is crucial because it delivers the bearer token for your extension in the proper format.

66 replies

WWasp-lang

•Created by sion0921 on 9/18/2024 in #🙋questions

How to generate Authorization header JWT token for custom API endpoint?