DEV Community: Venkata Ravindra

Next js auth middleware

Venkata Ravindra — Wed, 21 Feb 2024 17:38:50 +0000

Sure, you can add the middleware directly in the root folder of your Next.js app. To do that, create a file called middleware.js in the root folder and define your middleware function there. Here's an example:

import { getSession } from "next-auth/react";

export default async function middleware(req, res, next) {
  const session = await getSession({ req });

  // Check if the user is authenticated
  if (!session) {
    // User is not authenticated, redirect to the login page or show an error message
    return res.redirect("/login");
  }

  // If the user is authenticated, proceed to the next middleware or route handler
  return next();
}

In this example, the middleware function checks if the user is authenticated using getSession from NextAuth. If the user is not authenticated, it redirects them to the login page or shows an error message. If the user is authenticated, it proceeds to the next middleware or route handler.

To use this middleware for protected routes, you can import it in your Next.js pages or API routes and apply it as middleware. Here's an example:

import middleware from "../middleware";

export default function ProtectedPage() {
  // Apply the middleware to the page
  return (
    <div>
      <h1>This is a protected page</h1>
    </div>
  );
}

// Apply the middleware to the page
export async function getServerSideProps(context) {
  await middleware(context.req, context.res, async () => {
    // Proceed to the page logic
    return {
      props: {},
    };
  });
}

In this example, the middleware function is imported and applied in the getServerSideProps function, which is a Next.js server-side rendering function. The middleware is applied before the page logic is executed, ensuring that only authenticated users can access the protected page.

Remember to adjust the routes and authentication logic according to your specific application and requirements.

Let me know if you have any further questions!

middleware for authentication in your Next.js app integrated with Keycloak

Venkata Ravindra — Wed, 21 Feb 2024 09:51:07 +0000

Install the necessary packages. You'll need the keycloak-js package to handle authentication with Keycloak. You can install it by running the following command:

npm install keycloak-js

Create a new file called keycloak.js in the root of your project.
In keycloak.js, you can configure the Keycloak client using the Keycloak constructor. Here's an example:

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
  url: 'YOUR_KEYCLOAK_URL',
  realm: 'YOUR_REALM',
  clientId: 'YOUR_CLIENT_ID',
});

export default keycloak;

Make sure to replace 'YOUR_KEYCLOAK_URL', 'YOUR_REALM', and 'YOUR_CLIENT_ID' with the appropriate values for your Keycloak setup.

In your Next.js _app.js file, you can add the Keycloak authentication logic. Here's an example:

import { useEffect } from 'react';
import keycloak from '../keycloak';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    keycloak
      .init({ onLoad: 'login-required' })
      .then((authenticated) => {
        if (authenticated) {
          console.log('User is authenticated');
        } else {
          console.log('User is not authenticated');
        }
      })
      .catch((error) => {
        console.error('Keycloak initialization error:', error);
      });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

This code initializes the Keycloak client when the app loads and redirects the user to the Keycloak login page if they are not authenticated.

To protect specific routes with authentication, you can create a custom higher-order component (HOC) that checks if the user is authenticated before rendering the page. Here's an example:

import keycloak from '../keycloak';

export function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const { authenticated } = keycloak;

    if (!authenticated) {
      return <div>Not authenticated</div>; // Redirect to login page
    }

    return <Component {...props} />;
  };
}

You can then wrap your protected pages with the withAuth

Keycloak authentication with your Next.js

Venkata Ravindra — Fri, 09 Feb 2024 19:45:25 +0000

Install the required packages:

npm install next-auth keycloak-js

Create a pages/_app.js file with the following code:

import { Provider } from 'next-auth/client';
import { useEffect } from 'react';
import Keycloak from 'keycloak-js';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const keycloakConfig = {
      url: 'YOUR_KEYCLOAK_URL',
      realm: 'YOUR_REALM',
      clientId: 'YOUR_CLIENT_ID',
    };

    const keycloak = Keycloak(keycloakConfig);

    keycloak.init({ onLoad: 'login-required' }).success((authenticated) => {
      if (authenticated) {
        // If the user is authenticated, render the app
        keycloak.loadUserProfile().success((userProfile) => {
          // Pass the user's profile to the app
          pageProps.user = userProfile;
          renderApp();
        });
      } else {
        // If the user is not authenticated, redirect to Keycloak login
        keycloak.login();
      }
    });

    function renderApp() {
      ReactDOM.render(
        <Provider session={pageProps.session}>
          <Component {...pageProps} />
        </Provider>,
        document.getElementById('root')
      );
    }

    return () => {
      ReactDOM.unmountComponentAtNode(document.getElementById('root'));
    };
  }, []);

  return null;
}

export default MyApp;

In your Next.js pages, you can access the user's profile using useSession from next-auth/client. For example, in pages/index.js:

import { useSession } from 'next-auth/client';

export default function Home() {
  const [session, loading] = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return null; // Redirecting to Keycloak login
  }

  return (
    <div>
      <h1>Welcome, {session.user.name}!</h1>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

Make sure to replace the placeholders YOUR_KEYCLOAK_URL, YOUR_REALM, and YOUR_CLIENT_ID with your actual