next-auth-navigation

Next Auth Navigation

NextJS Library for authentication

Install

// with npm
npm i next-auth-navigation

// with yarn
yarn add next-auth-navigation

Why is next-auth-navigation ?

It is a NextJS Library for user authentication in client / server side. It provides basic HOC's that to wrap around pages to authenticate user very easily.

Usage

Authentication

next-auth-navigation only provides 2 helpful hocs to define user authentication in client / server side. Both hocs must be used for authentication.

• withAuth() and
• withAuthServerSideProps()

withAuth(Component, options?)

withAuth() accepts a component for which we wan an authentication as a first argument and options as a second argument. options

Let us configure the second argument.

• redirectUri ( optional ) : If the user is not logged in, user is redirected to path assigned in redirectUri.
• authenticatedUri ( optional ) : If the user is logged in, user is redirected to path assigned in authenticatedUri.
• FallbackComponent ( optional ) : If the user is not logged in, Fallback component is shown on a page.
• FeedbackComponent ( optional ) : Feedback component is shown when redirecting either on redirectUri or authenticatedUri.

withAuthServerSideProps(options?, callback?)

withAuthServerSideProps() is used instead of getServerSideProps() function on a page with withAuth() hoc. It is used to authenticate user in server-side. options is passed as a first optional argument where we can specify redirectUri or authenticatedUri for server-side redirection. callback function can be provided as second argument which acts as a getServerSideProps() function with context as a first argument and data as a second argument reffering all cookie data.

Example

import { withAuth, withAuthServerSideProps } from "next-auth-navigation";
function Home() {
  return <div>HOME PAGE</div>;
}

export default withAuth(Home, {
  redirectUri: "/login",
});

export const getServerSideProps = withAuthServerSideProps();

License

MIT © dipeshrai123