Merge pull request #1 from dipeshrai123/v1.0.3

V1.0.3

README.md

@@ -18,8 +18,6 @@ yarn add 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
@@ -29,24 +27,20 @@ It is a NextJS Library for user authentication in client / server side. It provi
 - **withAuth()** and
 - **withAuthServerSideProps()**
 
+#### withAuth(_Component_, _options?_)
 
-
-#### withAuth(_Component_, _options_)
-
-**withAuth()** accepts a _component_ for which we wan an authentication as a first argument and _options_ as a second argument. _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_, .
+- **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(callback)
-
-**withAuthServerSideProps()** is used instead of **getServerSideProps()** function on a page with **withAuth()** hoc. It is used to authenticate user in server-side. **callback** function can be provided which is acts as a **getServerSideProps()** function with _context_ as a first argument and _data_ as a second argument. 
-
-
+**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**
 
@@ -63,8 +57,6 @@ export default withAuth(Home, {
 export const getServerSideProps = withAuthServerSideProps();
 ```
 
-
-
 ## License
 
-MIT © [dipeshrai123](https://github.com/dipeshrai123)
+MIT © [dipeshrai123](https://github.com/dipeshrai123)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-auth-navigation",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "NextJS Library for authentication",
   "main": "dist/index.js",
   "scripts": {

src/index.tsx

@@ -52,20 +52,30 @@ async function getLogged(context: any) {
   }
 }
 
+type OptionType = {
+  redirectUri?: string; // Refers to: if not logged redirect to redirectUri
+  authenticatedUri?: string; // Refers to: if logged redirect to authenticatedUri
+  FallbackComponent?: React.ComponentType; // Refers to: if not logged in Component
+  FeedbackComponent?: React.ComponentType; // Refers to: Loading / Redirecting component
+};
+
 // Props for withAuth from getServerSideProps must contain `logged` key
 export const withAuth = (
   WrappedComponent: React.ComponentType,
-  options?: {
-    redirectUri?: string; // Referes to: if not logged redirect to redirectUri
-    FallbackComponent?: React.ComponentType; // Referes to: if not logged in Component
-    authenticatedUri?: string; // Refers to: if logged redirect to authenticatedUri
-  }
+  options?: OptionType
 ) => {
   return ({ logged, data }: { logged: any; data: any }) => {
     const router = useRouter();
     const redirectUri = options?.redirectUri;
-    const FallbackComponent = options?.FallbackComponent;
     const authenticatedUri = options?.authenticatedUri;
+    const FallbackComponent = options?.FallbackComponent;
+    const FeedbackComponent = options?.FeedbackComponent;
+
+    if (redirectUri && authenticatedUri) {
+      throw new Error(
+        "Both redirectUri and authenticatedUri mustn't be set at once."
+      );
+    }
 
     React.useEffect(() => {
       if (!logged && redirectUri) {
@@ -76,7 +86,11 @@ export const withAuth = (
     }, [logged, redirectUri]);
 
     if ((!logged && redirectUri) || (logged && authenticatedUri)) {
-      return <div>Redirecting...</div>;
+      return FeedbackComponent ? (
+        <FeedbackComponent />
+      ) : (
+        <div>Redirecting...</div>
+      );
     }
 
     if (!logged && FallbackComponent) {
@@ -87,21 +101,54 @@ export const withAuth = (
   };
 };
 
+// Attaching redirection paths in server-side
+const attachRedirection = (
+  targetObject: object,
+  {
+    redirectUri,
+    authenticatedUri,
+    logged,
+  }: { redirectUri?: string; authenticatedUri?: string; logged: boolean }
+) => {
+  if (!logged && redirectUri) {
+    targetObject["redirect"] = {
+      destination: redirectUri,
+      permanent: false,
+    };
+  } else if (logged && authenticatedUri) {
+    targetObject["redirect"] = {
+      destination: authenticatedUri,
+      permanent: false,
+    };
+  }
+};
+
 // Callback function here acts as a `getServerSideProps` function
 // If callback function is not passed, then it handles basic authentication
 // only for `logged` key
 // Callback function must return `logged` key as a prop.
 // Callback function accepts `context` and `data` as first and second args.
 // data contains all the available cookies in client browser with `logged` key (always).
 export const withAuthServerSideProps = (
-  getServerSideProps: (context: any, data: any) => any
+  options?: Pick<OptionType, "redirectUri" | "authenticatedUri">,
+  getServerSideProps?: (context: any, data: any) => any
 ) => {
   return async (context: any) => {
     const clientData = await getLogged(context);
     const { logged, ...props } = clientData;
 
+    // Redirection uris
+    const redirectUri = options?.redirectUri;
+    const authenticatedUri = options?.authenticatedUri;
+
+    if (redirectUri && authenticatedUri) {
+      throw new Error(
+        "Both redirectUri and authenticatedUri mustn't be set at once."
+      );
+    }
+
     if (getServerSideProps) {
-      const { logged, data } = await getServerSideProps(context, clientData);
+      const data = await getServerSideProps(context, clientData);
 
       if (!data) {
         throw new Error(`Callback function cannot return ${data}`);
@@ -111,15 +158,22 @@ export const withAuthServerSideProps = (
         throw new Error("Callback function must return props");
       }
 
-      return {
+      const returnObject = {
         props: {
           logged,
           data,
         },
       };
+      attachRedirection(returnObject, {
+        logged,
+        redirectUri,
+        authenticatedUri,
+      });
+      return returnObject;
     }
 
-    return {
+    // If callback is not passed create a `props` key for WrappedComponent
+    const returnObject = {
       props: {
         logged,
         data: {
@@ -130,5 +184,7 @@ export const withAuthServerSideProps = (
         },
       },
     };
+    attachRedirection(returnObject, { logged, redirectUri, authenticatedUri });
+    return returnObject;
   };
 };