Wasp•2w ago

Auth in browser extension

Hello, I'm trying to authenticate my user in browser extension. How is thould be handled. Do we have any docs how to create custom auth like this? Thanks

4 Replies

kapa.ai•2w ago

Hi @Sahee. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Wasp does not have official documentation specifically for implementing authentication in browser extensions. However, there are some relevant community discussions and general guidance that can help you set up custom authentication flows suitable for browser extensions. Key Points from Community Discussions - Custom API Endpoints & JWT: The recommended approach is to create custom API endpoints in your Wasp app that handle authentication and return a JWT (JSON Web Token) upon successful login. The browser extension can then store this token (e.g., in local storage) and use it for authenticating subsequent API requests by including it in the request headers. - Secure Communication: Ensure all communication between the extension and your backend uses HTTPS for security. - Endpoint Setup: You can define a custom API endpoint in your main.wasp file and implement the authentication logic in a server file. For example, you might have an endpoint like /api/generate-jwt that authenticates the user and returns a JWT. Make sure your server is running on the correct port (typically 3001 for Wasp server APIs) when testing these endpoints. Here’s a simplified outline based on the community thread:

// main.wasp
api generateJwt {
  fn: import { generateJwt } from "@src/server/api/generateJwt.js",
  entities: [User],
  httpRoute: (POST, "/api/generate-jwt")
}

// main.wasp
api generateJwt {
  fn: import { generateJwt } from "@src/server/api/generateJwt.js",
  entities: [User],
  httpRoute: (POST, "/api/generate-jwt")
}

// generateJwt.ts
import * as jwt from 'jsonwebtoken';
import { Request, Response } from 'express';

async function authenticateUser(username: string, password: string): Promise<{ isAuthenticated: boolean; userId?: string }> {
  // Implement your user authentication logic here
  return { isAuthenticated: true, userId: 'user123' }; // Example
}
export async function generateJwt(req: Request, res: Response): Promise<void> {
  const { username, password } = req.body;
  const authResult = await authenticateUser(username, password);
  if (!authResult.isAuthenticated) {
    res.status(401).json({ error: 'Invalid credentials' });
    return;
  }
  const userPayload = { username, userId: authResult.userId };
  const token = jwt.sign(userPayload, process.env.JWT_SECRET!, { expiresIn: '1h' });
  res.json({ token });
}

// generateJwt.ts
import * as jwt from 'jsonwebtoken';
import { Request, Response } from 'express';

async function authenticateUser(username: string, password: string): Promise<{ isAuthenticated: boolean; userId?: string }> {
  // Implement your user authentication logic here
  return { isAuthenticated: true, userId: 'user123' }; // Example
}
export async function generateJwt(req: Request, res: Response): Promise<void> {
  const { username, password } = req.body;
  const authResult = await authenticateUser(username, password);
  if (!authResult.isAuthenticated) {
    res.status(401).json({ error: 'Invalid credentials' });
    return;
  }
  const userPayload = { username, userId: authResult.userId };
  const token = jwt.sign(userPayload, process.env.JWT_SECRET!, { expiresIn: '1h' });
  res.json({ token });
}

- When the user logs in via the extension, send their credentials to this endpoint. - Store the returned JWT in the extension and include it in the headers for future API requests. For more details and a real-world example, see the community discussion: Discord support thread: Best Practices for Implementing Auth System in Chrome Extension Connected to OpenSaaS. Summary - Wasp does not have official docs for browser extension auth, but you can implement it using custom API endpoints and JWTs. - Securely store the JWT in the extension and use HTTPS for all communication. - Refer to the linked community thread for practical code examples and troubleshooting tips. If you need more advanced customization, Wasp allows you to create your own authentication actions and flows, as described in the customizing the auth flow section of the docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sahee, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

NEROX•2w ago

Hope this helps (my implementation): https://gist.github.com/NeroxTGC/80486aa3f992434332caad0e88302a81

Gist

custom-extension-auth.md

GitHub Gist: instantly share code, notes, and snippets.

miho•2w ago

Thank you @NEROX for sharing!

SaheeOP•2w ago

Damn, that's brilliant. I was able to get the user token from storage and use it as normal one. But might update it to your approach. Nice job man 🙂

Gaming

Programming

Auth in browser extension

Did you find this page helpful?