3arcus Posts - Answer Overflow

3arcus

Explore posts from servers

•Created by 3arcus on 6/29/2023 in #questions

Protect routes? For the app itself, no user auth, pages router. Help, desperate.

Hi, I'm a noob and I've been winging it with Chat GPT My app is ready, Im using next js 13, now I came to the challenge of protecting the routes, specially because I have routes to create / delete / update. This has become a problem. My app has interactions, that call the routes, I might have messed up the architecture, for instance: This is a button

onClick={() => {
                                    //updateTicket("free", id).then(() => setQuantity(quantity - 1));
                                    if (!lockedRaffle) updateTicket("free", id);
                                }}
                                disabled={quantity <= 0 || lockedRaffle}
                            >

onClick={() => {
                                    //updateTicket("free", id).then(() => setQuantity(quantity - 1));
                                    if (!lockedRaffle) updateTicket("free", id);
                                }}
                                disabled={quantity <= 0 || lockedRaffle}
                            >



Then, depending on the action, it will call a route like this

```try {
            setLockedRaffle(true);
            //await new Promise((r) => setTimeout(r, 1000)); // wait for 1 second

            const response = await fetch("/api/updateTicket", {
                // replace '/api/update-route' with your route
                method: "PUT",
                headers: {
                    "Content-Type": "application/json",
                    Authorization:

Bearer ${process.env.TOKEN}`, }, body: JSON.stringify({ address: owner, raffle: raffleID, updateType: "FROM_NULL", }), });```` There is no user authentication, it's the App that decides what and where to update, obvious problem is that I don't want someone else calling these endpoints, I've now realised that Bearer is undefined, probably because this is being rendered client side? So how do I solve this? I can't find a solution, every tutorial that I've came across relies on authentication from the user, this is not what I want, the user should never be authorised to call these endpoints, it's the app that decided what to call depending on whats happening, such as buttons being pushed, Albeit probably subpart and dumb, my "architecture" works as I intended, the only issue is, how do I protect the routes, I'm able to protect them by checking the "origin" but this can be spoofed, I need some sort of token where the route checks for the token and the token is passed on the headers of the interaction that fetches the data, the problem is, I assume, that if the component is client side, then the client would be able to access this token, this is obviously not what I want. So how do I make a server side component on next js 13, that has buttons on the client side?! I hope this makes sense, I'm desperate with this. I know how stupid this sounds, my knowledge has gaps, please understand, I'm working on this. Thank you!

131 replies

Gaming

Programming