adverse-sapphire•2y ago

How can I use `authProvider.getIdentity()` inside `getServerSideProps` with Next.sj.

Hello! I am using Supabase for auth and Next.js for routing. Is there any way to get the user auth data inside the Next.sj getServerSideProps function? I want to check some claims in my user/jwt in the SS props function but the function returns null. Im assuming it has to do with authProvider mostly working client side? Thanks in advance.

11 Replies

kapa.ai•2y ago

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

kapa.ai•2y ago

---------------------- Yes, you can get the user auth data inside the Next.js getServerSideProps function. You can use your authProvider's check function inside the server-side function to check if the user is authenticated or not and redirect them to other pages if needed. Here's an example of how to do this:

import { authProvider } from "src/authProvider";

export const getServerSideProps = async (context) => {
  // We've handled the SSR case in our `check` function by sending the `context` as parameter.
  const { authenticated, redirectTo } = await authProvider.check(context);

  if (!authenticated) {
    context.res.statusCode = 401;
    context.res.end();
  }

  if (!authenticated && redirectTo) {
    return {
      redirect: {
        destination: redirectTo,
        permanent: false,
      },
    };
  }

  return {
    props: {
      authenticated,
    },
  };
};

import { authProvider } from "src/authProvider";

export const getServerSideProps = async (context) => {
  // We've handled the SSR case in our `check` function by sending the `context` as parameter.
  const { authenticated, redirectTo } = await authProvider.check(context);

  if (!authenticated) {
    context.res.statusCode = 401;
    context.res.end();
  }

  if (!authenticated && redirectTo) {
    return {
      redirect: {
        destination: redirectTo,
        permanent: false,
      },
    };
  }

  return {
    props: {
      authenticated,
    },
  };
};

This needs to be done for all the routes that you want to protect. You can find more information about handling authentication in Next.js with refine in the documentation (https://refine.dev/docs/packages/documentation/routers/nextjs). Keep in mind that you might need to adjust the authProvider implementation to handle server-side authentication properly, especially if you're using cookies for authentication. You can find an example of how to handle server-side authentication with cookies in the refine documentation (https://refine.dev/docs/packages/documentation/routers/nextjs#server-side-authentication-with-cookies). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Next.js | refine

refine provides router bindings and utilities for Next.js. This package will provide easy integration between refine and Next.js for both existing projects and new projects without giving up the benefits of Next.js.

kapa.ai•2y ago

<@260960777010151436> kapa.ai is still learning and improving, please let us how it did by reacting below

adverse-sapphire•2y ago

Thats a pretty good answer, but I need the actual identity data inside the props function, not just if it is authenticated or not.

adverse-sapphire•2y ago

Also the provided link has an empty section :/

automatic-azure•2y ago

Oops, can you create an issue please? We’ll fix it asap. For now, you can inspired by our nextjs authentication example here: https://refine.dev/docs/examples/next-js/auth/

Authentication | refine

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple refine app in Next.js with Authentication features.

adverse-sapphire•2y ago

Done! https://github.com/refinedev/refine/issues/4011 I was able to achieve what I wanted by using the Supabase client directly, thanks for the help!

GitHub

[DOC] Empty Server Side Authentication with Cookies section · Iss...

Documentation issue The section for Server Side Authentication with Cookies is empty: refine/documentation/docs/packages/documentation/routers/nextjs-router.md Line 900 in 88e1f80 ### Server Side A...

automatic-azure•2y ago

I’m glad to hear that🤙🏻

wise-white•9mo ago

@kapa.ai is there any way to handle this authentication globally to keep the code DRY?

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can handle authentication globally in your Next.js application with Refine. However, it's important to note that while you can wrap your top-level component with the Authenticated component to handle client-side authentication, server-side authentication must be handled individually for each page using the getServerSideProps function. Here's an example of how you can handle client-side authentication globally:

import { Authenticated } from "@refinedev/core";

const MyApp = ({ Component, pageProps }) => (
  <Authenticated>
    <Component {...pageProps} />
  </Authenticated>
);

export default MyApp;

import { Authenticated } from "@refinedev/core";

const MyApp = ({ Component, pageProps }) => (
  <Authenticated>
    <Component {...pageProps} />
  </Authenticated>
);

export default MyApp;

In this example, all child pages will inherit the requirement to authenticate. However, this only works for client-side. For server-side validation, you still need to use the getServerSideProps function in each page. You can find more information about this in the refine documentation (https://refine.dev/docs/router-integrations/next-js#authentication). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below