``There is an issue with getServerSideProps when wrapping it in a

Question

``There is an issue with getServerSideProps when wrapping it in a

When attempting to implement an auth handler function around getServersideProps, I encountered the following error message:

TypeError: getServerSideProps is not a function

The wrapper code in question is as follows:

export async function protect(gssp) {
    return async (context) => {
        const {req, res} = context;
        const auth = await authHandler(req);
        if (!auth.authenticated) {
            res.statusCode = 302;
            res.setHeader('Location', '/');
            return;
        }
        context.auth = auth;
        return await gssp(context);
    }
}

The implementation of getServerSideProps on the page appears like this:

export const getServerSideProps = protect(async function(context) {
    return {
        props: {
            auth: context.auth
        }
    }
})

javascript next.js

Answer 1

Answer №1

When you use the protect(...) function, it will return a promise instead of a regular function because you have defined it with the keyword async. To resolve this problem, all you need to do is remove the async keyword from the function.

export function protect(gssp) {
    // No changes made here
}

Answer 2

When you use the protect(...) function, it will return a promise instead of a regular function because you have defined it with the keyword async. To resolve this problem, all you need to do is remove the async keyword from the function.

export function protect(gssp) {
    // No changes made here
}

``There is an issue with getServerSideProps when wrapping it in a

Answer №1

Similar questions

Use angular js to dynamically load a template via an ajax request

The process of reversing an array is not fully completing due to the pop method being used within a loop

Set YouTube Playlist to start from a random index when embedded

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Organizing requests in PHP: What are the best methods?

Resizing an image within an anchor tag

Deploy the Next.js app on Vercel without regenerating pages, and instead trigger the deployment only upon request

What causes parameters to be initially passed as undefined when sending them from one component to another, only to later arrive with the actual data intact

Issues of unfulfilled requirements in the recent npm (and node) updates

Issue encountered when attempting to send FormData from Next.js API to Express.js backend resulting in Error 405: Bad Request

React - updating key prop does not trigger re-render of child component

Error: Papa is not defined. The file was loaded from the CDN in the header section

Tips for Keeping Sub Menu Visible Without Having to Click

Assign a custom value to the ng-options and ensure that the first option is selected by default

Transform Django Model Instance from Serialized Back to Object using Ajax

Experimenting with NGXS selectors: A comprehensive guide

Another project cannot import the library that was constructed

Buttons aligned vertically alongside an input text field

Arrange Bootstrap-Vue table in a custom order of days (mon, tue, wed) instead of the default

In Vue.js2, you can easily compare two arrays of objects that have the same values and then make changes or add properties from one array to the other