With the new awesome middleware functions, how do you pass data to getServerSideProps? req.session = 'something' does nothing 🙈

[sslash]

My use case is this:
In every getServerSideProps I need to call a specific (session) API and pass the result to the browser. When I heard of middlewares I immediately though I could just do that in those instead, and thus avoid the duplication. So I thought I could just call my api in the outermost "_middleware" function, and pass the result to each subsequent getServerSideProps function.

The problem:
Having looked into middlewares, I can't figure out a way to pass the result in the middleware to subsequent getServerSideProps calls. Presumably I could just do something like:

async function _middleware(req) {
    const apiData = await api.getSessionData(req.headers)
    
    // create a session object for getServerSideProps
    req.session = {
        ...apiData
    }

    return NextResponse.next();
}



// every getServerSideProps should now be able to:
export function getServerSideProps(ctx) {
    return doThingsWith(ctx.req.session)
}

But this does not work as I hoped.

Is there another way to achieve this? Or am I misunderstanding the intention with middlewares?

Thanks!

[stigkj]

I have also tried to get this to work. As far as I can understand, a middleware function in Next.js is not like middleware in Express or other frameworks. It seems to be more of a preprocess tool that can only use standard Web APIs, i.e. it can work on headers, cookies, do a redirect, or rewrite. But it still is only beta so I guess some stuff might still change :-)

[sslash]

Yeah that's the conclusion I've come to as well!

[LuudJanssen]

Maybe you could do a rewrite to a route with query parameters? So your middleware rewrites to the route it was accessing + ?data=test. Then in getServerSideProps you could read the query parameters and use the data.

I do think it's not meant to be used for this. You could always just create a function to handle the sessions and include it in all getServerSideProps calls.

[sslash]

Yup! Was thinking of something like this as well. Could possibly work, but it also feels a bit like the wrong abstraction to make for this. Hopefully there will be something more classic express-middleware like that would support this feature in a much better way.

Thanks for taking the time to answer!

[binajmen]

I do hope something will come up in the future, because this is exactly what I'm looking for!!

I'm using Next + Supabase, and would like to have access to user/profile info within getServerSideProps for some specific path (/admin, ...)

The idea would be to move the following logic to a middleware to avoid repetition accross the pages to protect:

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  const { user } = await supabase.auth.api.getUserByCookie(req);

  if (!user) {
    return { props: {}, redirect: { destination: '/signin', permanent: false } };
  }

  const { data: profiles, error } = await supabase.from("profiles").select().eq("user_id", user.id);
  if (error) {
    console.error(error);
    return {
      props: { code: 'err_get_profile', error },
      redirect: { destination: '/error', permanent: false }
    };
  }

  if (profiles === null) {
    return {
      props: { code: 'profile_is_null' },
      redirect: { destination: '/error', permanent: false }
    };
  } else if (profiles.length !== 1) {
    return {
      props: { code: 'too_many_profiles' },
      redirect: { destination: '/error', permanent: false }
    };
  }

  return {
    props: {
      user,
      profile: profiles[0],
    }
  };
}

[cubesnyc]

+1

[daniellin215]

Need this for next-auth too, pass the session object to the next part not just authenticate...

[entvia]

Hi @binajmen! Thanks for sharing your example in 2021. How would you do it today. I have also supabase and would like to pass session from middleware to the API endpoint. Would appreciate any advice.

[entvia]

UPD: ok, I see that it can be easily solved now by passing whatever you want in response headers in the middleware, for example res.headers.set('user_id', session?.user?.id as string); And then in the API handler (in my case) we can get our value like res.getHeader('user_id'). res is NextApiResponse. So, probably things got improved since 2021.

[paulmuenzner]

@binajmen
Maybe getInitialProps without middleware is your solution. For me it is. I check the auth status via getInitialProps in _app and pass the result to all other getInitialProps on any page where I can access it. Furthermore I make it available inside my components with a react context provider.

_app.tsx
import { AuthProvider, getUser } from '../src';
...
...
return (
		<Provider store={store}>
			<AuthProvider myAuth={props.auth}>
					<ThemeProvider theme={theme}>
						<GlobalStyles />
						<Component {...pageProps} />
					</ThemeProvider>
				</AuthProvider>
		</Provider>
	);
}

...
...
CustomApp.getInitialProps = async (appContext) => {
	const auth = await getUser(appContext.ctx); //Checking auth status via backend req res
	appContext.ctx.customProp = auth;
	const appProps = await App.getInitialProps(appContext);
	return { ...appProps, auth: auth };
};

/src/index.tsx
export const getUser = async (ctx): Promise<{ isAuth: boolean; user: any } | any> => {
	const cookies = ctx?.req?.cookies ? ctx.req.cookies : undefined;
	const config = {
		url: 'http://localhost:8800/authApi',
		method: 'post',
		withCredentials: true,
		data: { cookieFromServer: true, cookies: cookies },
		headers: {
			'Content-Type': 'application/json',
		},
	};
	return await axios
		.request(config)
		.then((response) => {
			if (response.data) {
				return { isAuth: true, user: response.data };
			} else {
				return { isAuth: false, user: null };
			}
		})
		.catch((error) => {
			return { isAuth: false, user: null };
		});
};
export const AuthProvider = (props) => {
	const auth = props.myAuth || { isAuth: false, user: null };

	const login = async (email, password) => {
		// Use any auth service methods here
		return await axios({
			method: 'post',
			url: `${process.env.NEXT_PUBLIC_API_URL}/login`,
			data: { email, password },
			withCredentials: true,
		})
			.then(() => {
				router.push('/');
				console.log('user signed in');
			})
			.catch((error) => {
				console.log('Incorrect email or password entered.', error);
			});
	};
	const register = async (email, password) => {
		return await axios({
			method: 'post',
			url: `${process.env.NEXT_PUBLIC_API_URL}/register`,
			data: { email, password },
			withCredentials: true,
		})
			.then(function (response) {
				router.push('/');
				console.log('user registered');
			})
			.catch(function (error) {
				console.error(error.message);
			});
	};
	const logout = async () => {
		return await axios
			.get(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
				withCredentials: true,
			})
			.then(() => {
				router.push('/');
				console.log('user logged out');
			})
			.catch((error) => {
				console.error(error.message);
			});
	};
	return (
		<AuthContext.Provider
			value={{ auth, logout, register, login }}
			{...props}
		/>
	);
};
export const useAuth = () => useContext(AuthContext);
export const AuthConsumer = AuthContext.Consumer;

After that, you can access it in any page via getInitialProps or

/pages/login
import { useAuth } from '../../../src';

function LoginPage() {
	const { auth, login, register } = useAuth();
...
...
LoginPage.getInitialProps = async (appContext) => {
	console.log('getInitialProps', appContext.customProp); // >>> Check that your custom props (auth/getUser) have been passed
	appContext.res.writeHead(302, {
		Location: '/',
		'Content-Type': 'text/html; charset=utf-8',
	});
	appContext.res.end();
};

export default LoginPage;

In case of any question, feel free to ask me....

[Yeffej]

This is a big problem that I hope next.js can resolve in coming updates. The way I achieve this was using the NextResponse.rewrite() method.
I just pass as query parameter the information I wanted to receive.