Wasp•2y ago

How to create a custom API Endpoint to check subscriptionStatus and subscriptionTier

I am building a browser extension that should only be accessible to the users that have an account with my webapp and are logged in with the same browser.

My wasp version seems to be 0.13.2 as it returns that when I run wasp version.

I have noticed that wasp documentation mentions this in the documentation for wasp 0.13:
https://wasp-lang.dev/docs/advanced/apis#api-reference

api fooBar { // APIs and their implementations don't need to (but can) have the same name.
fn: import { fooBar } from "@src/apis",
httpRoute: (GET, "/foo/bar")
}

and for queries:

query getAllTasks {
fn: import { getAllTasks } from "@src/queries.js"
}

query getFilteredTasks {
fn: import { getFilteredTasks } from "@src/queries.js"
}

Anyhow, I have noticed that my default set up queries use a different path:

query getDailyStats {
fn: import { getDailyStats } from "@src/server/queries.js",
entities: [User, DailyStats]
}

I can't make custom endpoints work and have been trying for an entire day now.

Calls like this one work without a problem though: http://localhost:3001/auth/email/login

My Questoins are the following:

Is it correct to have quereis.ts and actions.ts at these paths when on wasp 0.13?

app/src/server/queries.ts
app/src/server/actions.ts

Is there already a build in way to check if somebody is a subscribed user?
Am i missing something obvious here?

Thank you in advance for any help! This is doing my head in.

Custom HTTP API Endpoints | Wasp

In Wasp, the default client-server interaction mechanism is through Operations. However, if you need a specific URL method/path, or a specific response, Operations may not be suitable for you. For these cases, you can use an api. Best of all, they should look and feel very familiar.

MEE6•7/1/24, 7:22 PM

Wohooo @fred-123, you just became a Waspeteer level 1!

kapa.ai•7/1/24, 7:22 PM

Hi @fred-123. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•7/1/24, 7:23 PM

----------------------
Based on the information provided in the knowledge sources, here are the answers to your questions:

**Is it correct to have queries.ts and actions.ts at these paths when on wasp 0.13?**Yes, it is correct to have `queries.ts` and `actions.ts` in the `src/server` directory. The path you use to import these files in your Wasp code should match their location in your project structure. For example, if your `queries.ts` file is located in `src/server`, you would import it in your Wasp code like this: `import { getDailyStats } from "@src/server/queries.js"`.
**Is there already a built-in way to check if somebody is a subscribed user?**Wasp provides built-in authentication functionality, which you can use to restrict access to certain parts of your application to authenticated users. You can check if a user is authenticated in your queries and actions by checking the `context.user` object. If `context.user` is `null`, the user is not authenticated. Here's an example from the **Wasp tutorial** (<https://wasp-lang.dev/docs/tutorial/auth#updating-operations-to-check-authentication>):

However, if by "subscribed user" you mean a user who has an active subscription (for example, a paid subscription), you would need to implement this functionality yourself. You could do this by adding a field to your entity, and then checking this field in your queries and actions.

**Am I missing something obvious here?**Without more information about the specific problems you're encountering, it's hard to say what might be going wrong. However, here are a few things you could check:

kapa.ai•7/1/24, 7:23 PM

Make sure you've declared your API in your Wasp code using the declaration, and that the field of this declaration points to the correct location of your API's implementation. For example:

Make sure your API's implementation is correctly defined and exported in your `apis.js` (or `apis.ts`) file.
If you're trying to access your API from the client, make sure you're using the Axios wrapper from `wasp/client/api` to make the request. For example:

If you're still having trouble, you might find it helpful to look at the Wasp documentation (https://wasp-lang.dev/docs), or to ask for help on the Wasp Discord server (https://discord.com/invite/rzdnErX).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/1/24, 7:23 PM

Sorry @fred-123, 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?

fred-123OP•7/1/24, 7:28 PM

@kapa.ai why would i have to add a subscriptionStatus to the user entity?

isn't that what this is for?

subscriptionTier String?
subscriptionStatus String?

kapa.ai•7/1/24, 7:28 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/1/24, 7:29 PM

----------------------
You're correct. If your entity already includes and fields, you can use these fields to track the subscription status of your users.

In this case, you wouldn't need to add a new field. Instead, you could check the value of the existing field to determine whether a user is a subscribed user.

Here's an example of how you might do this in a query or action:

In this example, the function checks whether the user is authenticated and whether their is . If either of these conditions is not met, the function throws a 401 error.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/1/24, 7:29 PM

Sorry @fred-123, 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?

fred-123OP•7/1/24, 8:30 PM

@kapa.ai how can i set up a jwt token upon login?

kapa.ai•7/1/24, 8:30 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/1/24, 8:30 PM

----------------------
To set up a JWT token upon login, you can create a custom API endpoint in your Wasp application that generates a JWT when the user logs in. Here's an example of how you might do this:

First, define the API endpoint in your file:

Then, implement the function in a file in your directory. This function should authenticate the user, generate a JWT containing the user's data, and send the JWT back to the client:

```javascript
import * as jwt from 'jsonwebtoken';
import { Request, Response } from 'express';

async function authenticateUser(username, password) {
// TODO: Implement actual user authentication logic here
// This should fetch the user's ID from the database based on the provided username and password
// For demonstration, assuming authentication is successful and returning a mock user ID
return { isAuthenticated: true, userId: 'user123' };
}

export async function generateJwt(req, res) {
const { username, password } = req.body;

try {
const authResult = await authenticateUser(username, password);

if (!authResult.isAuthenticated) {
res.status(401).json({ error: 'Invalid credentials' });
return;
}

// User payload for JWT
const userPayload = { username, userId: authResult.userId };

// Retrieve the secret key from environment variables
const secretKey = process.env.JWT_SECRET_KEY;

if (!secretKey) {
throw new Error('JWT secret key is missing');
}

// Token options
const options = { expiresIn: '1h' }; // Token expires in 1 hour

// Generate the JWT
const token = jwt.sign(userPayload, secretKey, options);

kapa.ai•7/1/24, 8:30 PM

// Send the JWT back to the client
res.json({ token });
} catch (error) {
console.error('Error generating JWT token:', error);
res.status(500).json({ error: 'Internal server error' });
}
}
authenticateUsergenerateJwtjsonwebtoken` library to generate a JWT. The JWT is signed with a secret key, which is retrieved from the environment variables. The JWT contains the user's username and user ID, and expires after 1 hour.

Once the JWT is generated, it's sent back to the client in the response body.

You can then store this JWT in your client application (for example, in local storage), and include it in the headers of subsequent API requests to authenticate the user.

Please note that this is a basic example and might need to be adjusted based on your specific requirements and security considerations.

For more information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs) or the Wasp Discord community (🙋questionsBest Practices for Implementing Auth System in Chrome Extension Connected to OpenSaaS) for more specific discussions on this topic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/1/24, 8:30 PM

Sorry @fred-123, 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?

fred-123OP•7/1/24, 9:04 PM

@kapa.ai I have a few questions.

The file src/server/api does not exist in the default open saas template. Should i just add it or is this set up differently in opensaas?

Is the secret key that is retrieved from the environment variables set up on default or do i need to set this up?

kapa.ai•7/1/24, 9:04 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/1/24, 9:05 PM

----------------------

**The file src/server/api does not exist in the default open saas template. Should i just add it or is this set up differently in opensaas?**The `src/server/api` directory is not included by default in the OpenSaaS template. If it doesn't exist, you can create it yourself. This directory is meant to contain your custom server-side API implementations. The structure of your project can vary depending on your needs, so feel free to organize your files and directories in a way that makes sense for your application.
**Is the secret key that is retrieved from the environment variables set up on default or do I need to set this up?**The secret key used for signing JWTs is typically stored in an environment variable for security reasons. This environment variable is not set up by default. You will need to set it up yourself. You can do this by adding a line to your `.env` file (which should be in the root directory of your project) like this:

Replace with a strong, random string. This string should be kept secret, as anyone who knows it could use it to generate valid JWTs for your application.

After adding this line to your

.env

.env

file, you can access the secret key in your code using .

Remember not to include your

.env

.env

file in your version control system (e.g., by adding it to your file) to prevent it from being exposed publicly.

For more information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs) or the Wasp Discord community (🙋questionsBest Practices for Implementing Auth System in Chrome Extension Connected to OpenSaaS) for more specific discussions on this topic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/1/24, 9:05 PM

Sorry @fred-123, 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?

fred-123OP•7/1/24, 9:45 PM

@kapa.ai can the login logic be customized at all and if yes where can i find it?

kapa.ai•7/1/24, 9:45 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/1/24, 9:46 PM

----------------------
Yes, the login logic can be customized in Wasp. You can use the action provided by Wasp to create your own custom login flow.

Here is an example of how you can use the action in a React component:

In this example, the action is called with the username and password entered by the user. If the login is successful, the user is redirected to the home page. If the login fails, an error is displayed.

You can find more information about customizing the login flow in the Wasp documentation (https://wasp-lang.dev/docs/auth/username-and-pass#login).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/1/24, 9:46 PM

Sorry @fred-123, 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?

miho•7/2/24, 8:44 AM

Here's a human to help as well. Could you give me a TLDR of what is your current issue?

If some of the Wasp concepts are still confusing to you, I'd recommend going through the simple tutorial app to iron out any missing fundmentals: https://wasp-lang.dev/docs/tutorial/create

1. Creating a New Project | Wasp

You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the QuickStart guide!

fred-123OP•7/2/24, 5:30 PM

Hi @miho,

I am trying to get the following information from the User entity through an api endpoint so i can retrieve it from outside the webapp.

subscriptionTier
subscriptionStatus

I was reading through the documentation quite a lot but can't seem to figure it out exactly.

Can you give me a macro overview of what I would need to do.
What confuses me a bit is the entire auth process, as I can't seem to find out where it actually happens apart from the auth declaration in the main.wasp.

I managed to do api calls with the endpoint http://localhost:3001/auth/email/login to check if a given username and password combination is a user present in the DB.

fred-123OP•7/2/24, 5:40 PM

@kapa.ai how do I create a custom api endpoint to retrieve the following information from the user entity to access it from outside:

subscriptionTier
subscriptionStatus

kapa.ai•7/2/24, 5:40 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/2/24, 5:40 PM

----------------------
To create a custom API endpoint that retrieves and from the entity, you can follow these steps:

Declare the API in your Wasp code:

Implement the function in a file in your directory. This function should fetch the user's and from the database and send them back to the client:

In this example, the function expects the user ID to be provided as a query parameter (e.g., ). It uses this ID to fetch the user's and from the database, and sends these values back to the client in the response body.

Please note that this is a basic example and might need to be adjusted based on your specific requirements and security considerations. For example, you might want to add authentication to this endpoint to ensure that only authenticated users can access it.

kapa.ai•7/2/24, 5:40 PM

For more information, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/advanced/apis) or the Wasp Discord community (🙋questionsBest Practices for Implementing Auth System in Chrome Extension Connected to OpenSaaS) for more specific discussions on this topic.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/2/24, 5:40 PM

Sorry @fred-123, 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?

fred-123OP•7/2/24, 6:03 PM

I got it working now.

For anybody else that wants to retrieve subscriptionStatus and subscriptionTier through API Endpoint here is how i have it set up.

In main.wasp add this under the custom Wasp Api Endpoints

api getUserSubscriptionInfo {
fn: import { getUserSubscriptionInfo } from "@src/server/api/getUserSubscriptionInfo.js",
entities: [User],
httpRoute: (GET, "/api/user-subscription-info")
}

I have then created a new folder called api at this path:

app/src/server/

inside the new api folder i have created a function called getUserSubscriptionInfo.js containing the following:

import { HttpError } from 'wasp/server';

export async function getUserSubscriptionInfo(req, res, context) {
const userId = req.query.userId;

if (!userId) {
throw new HttpError(400, 'User ID is required');
}

const user = await context.entities.User.findUnique({ where: { id: parseInt(userId, 10) } });

if (!user) {
throw new HttpError(404, 'User not found');
}

const { subscriptionTier, subscriptionStatus } = user;

res.json({ subscriptionTier, subscriptionStatus });
}

It then can be tested with postman:

get http://localhost:3001/api/user-subscription-info

body-> raw -> json:

{
"email": "a valid user email that is present inside the db",
"password": "the password associated with said user email"

}

params

key: userId
value: the sames users id from the db

it will then return the information in the body. For example:

{
"subscriptionTier": "Pro",
"subscriptionStatus": "past_due"
}

fred-123OP•7/2/24, 6:15 PM

this is how you can make it work only with the user email so you don't need the userid:

app/src/server/api/getUserSubscriptionInfo.js

import { HttpError } from 'wasp/server';

export async function getUserSubscriptionInfo(req, res, context) {
const email = req.query.email;

console.log('Received email:', email); // Debugging line

if (!email) {
throw new HttpError(400, 'Email is required');
}

const user = await context.entities.User.findUnique({ where: { email: email } });

console.log('Queried user:', user); // Debugging line

if (!user) {
throw new HttpError(404, 'User not found');
}

const { subscriptionTier, subscriptionStatus } = user;

res.json({ subscriptionTier, subscriptionStatus });
}

MEE6•7/2/24, 6:15 PM

Wohooo @fred-123, you just became a Waspeteer level 2!

fred-123OP•7/2/24, 6:17 PM

@kapa.ai its all clear now. How can i mark this thread as solved?

kapa.ai•7/2/24, 6:17 PM

Let me check the knowledge base for you. One moment!

kapa.ai•7/2/24, 6:17 PM

----------------------
I'm an AI and don't have the ability to mark threads as solved. However, you can usually mark a thread as solved by editing the original post or title to include something like "[SOLVED]" at the beginning. The exact method can vary depending on the platform you're using. If you're on a platform like Discord or a forum, you might also be able to select a "Mark as solved" option somewhere. If you're not sure, you can ask a moderator or other community member for help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•7/2/24, 6:17 PM

Sorry @fred-123, 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?

miho•7/3/24, 8:41 AM

@fred-123 nice! Thank you for the solutions, I'll mark it as solved. Oh you already did, good job

Ffred-123 this is how you can make it work only with the user email so you don't need the ...

Sven•9/12/24, 11:08 AM

how would this make sure the chrome extension user is not still able to acces it when their they are no longer paying?

Sven•9/12/24, 11:08 AM

Are you just constantly retrieving the tier/status in a background script or at any action they try to do with the chrome extension?

Sven•9/12/24, 11:10 AM

Also how would i make this extension that access an endpoint from the SaaS only when a user is authenticated?

fred-123OP•9/17/24, 5:12 AM

I am retrieving the status in the background. You can trigger it when an event is triggered that requires paid subscription.

Once the status of the user changes in the db he can't use the extension or certain features of the extension anymore depending on how you set it up. You should include two statuses. Subscription tier and payment status.

If the user hasn't paid in time his payment status will be set to past_due. Make sure your logic checks that and your good.

You can just trigger a subscription checking script after the user has logged in.

Ffred-123 I am retrieving the status in the background. You can trigger it when an event i...

Sven•9/17/24, 10:48 AM

how are you retrieving the status in the bcakground?

Sven•9/17/24, 10:48 AM

could you provide a code snippet

fred-123OP•9/17/24, 10:49 AM

just call the api and pass it to wherever you need it in your script

fred-123OP•9/17/24, 10:49 AM

I am not sure anymore if i had to set up a custom endpoint for it or if it was already there

Sven•9/17/24, 11:50 AM

What endpoint are you calling the auth/me? and how do you pass anything in it and know who the user is?

fred-123OP•9/17/24, 1:48 PM

you have to call

https://[your-server-url].fly.dev/auth/email/login

I have set up a login screen where the usere enters the email and password.

The info is then passed to the api endpoint for auth to check if it's an existing user.
In the same function that does this auth part I save the useres email address that was used to log in into the users browser storage.

That email address is then used to to check the subscription status and subscription tier:

app/src/server/api/getUserSubscriptionInfo.js

import { HttpError } from 'wasp/server';

export async function getUserSubscriptionInfo(req, res, context) {
const email = req.query.email;

console.log('Received email:', email); // Debugging line

if (!email) {
throw new HttpError(400, 'Email is required');
}

const user = await context.entities.User.findUnique({ where: { email: email } });

console.log('Queried user:', user); // Debugging line

if (!user) {
throw new HttpError(404, 'User not found');
}

const { subscriptionTier, subscriptionStatus } = user;

res.json({ subscriptionTier, subscriptionStatus });
}

Then you just do some basic conditional statements to set up the logic what the users is meant to have access to or not

fred-123OP•9/17/24, 1:49 PM

just use something like postman to test it.

fred-123OP•9/17/24, 1:51 PM

just share your code in a new thread and i am sure somebody will be happy to point you in the correct direction.

fred-123OP•9/17/24, 1:53 PM

regarding the endpoint. Most likely you are working locally so it would be this for you if you use that port:

http://localhost:3001/auth/email/login

Make sure you call on port 3001 which is the server and not on 3000 which is the client