chore(examples): add with-nextjs-auth example (refinedev#3646)

* chore(examples): add nextjs example with dummy auth

* docs(examples): add with-nextjs-auth to examples list

* chore(examples): update build command of nextjs examples

documentation/docs/examples/next-js/auth.md

@@ -0,0 +1,11 @@
+---
+id: auth
+title: Authentication
+example-tags: [next.js,router-provider,antd,authentication]
+---
+
+**refine** allows you to build your [**SSR**](https://nextjs.org/docs/basic-features/pages#server-side-rendering) 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.
+
+[Refer to the refine Next.js documentation for more information. →](/docs/advanced-tutorials/ssr/nextjs.md)
+
+<CodeSandboxExample path="with-nextjs-auth" />

documentation/sidebars.js

@@ -824,6 +824,7 @@ module.exports = {
                     items: [
                         "examples/next-js/nextjs",
                         "examples/next-js/nextjs-appdir",
+                        "examples/next-js/auth",
                     ],
                 },
                 {

examples/i18n-nextjs/next.config.js

@@ -6,4 +6,15 @@ module.exports = withPlugins([], {
     experimental: {
         newNextLinkBehavior: true,
     },
+    transpilePackages: [
+        "@pankod/refine-antd",
+        "@pankod/refine-inferencer",
+        "antd",
+        "@ant-design/pro-components",
+        "@ant-design/pro-layout",
+        "@ant-design/pro-utils",
+        "@ant-design/pro-provider",
+        "rc-pagination",
+        "rc-picker",
+    ],
 });

examples/i18n-nextjs/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 next dev -p 3001",
-        "_build": "next build",
+        "build": "next build",
         "start:prod": "next start",
         "lint": "eslint '**/*.{js,jsx,ts,tsx}'"
     },

examples/with-nextjs-appdir/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 PORT=3002 next dev",
-        "_build": "next build && rm -rf .next/cache",
+        "build": "next build && rm -rf .next/cache",
         "start:prod": "next start",
         "lint": "eslint '**/*.{js,jsx,ts,tsx}'"
     },

examples/with-nextjs-auth/.gitattributes

@@ -0,0 +1 @@
+* text=auto

examples/with-nextjs-auth/.gitignore

@@ -0,0 +1,8 @@
+# npm
+node_modules
+# next.js build files
+.next
+# environment variables
+.env
+.env.*
+!.env.example

examples/with-nextjs-auth/LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+n
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

examples/with-nextjs-auth/README.MD

@@ -0,0 +1,45 @@
+
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img src="https://raw.githubusercontent.com/refinedev/refine/master/logo.png"   style="width:250px;" align="center" />
+</a>
+<br />
+<br />
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> | 
+    <a href="https://refine.dev/blog/">Blog</a> | 
+    <a href="https://refine.dev/docs/">Documentation</a> | 
+    <a href="https://github.com/refinedev/refine/projects/1">Roadmap</a>
+</div>
+</div>
+
+<br />
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<br />
+<br />
+
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try it out on your local
+
+```bash
+npm create refine-app@latest -- --example with-nextjs-auth
+```
+
+## Try it out on CodeSandbox
+
+<br/>
+
+[![Open with-nextjs-auth example from refine](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/with-nextjs-auth?view=preview&theme=dark&codemirror=1)
+

examples/with-nextjs-auth/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-nextjs-auth/next.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    experimental: {
+        newNextLinkBehavior: true,
+    },
+    transpilePackages: [
+        "@pankod/refine-antd",
+        "@pankod/refine-inferencer",
+        "antd",
+        "@ant-design/pro-components",
+        "@ant-design/pro-layout",
+        "@ant-design/pro-utils",
+        "@ant-design/pro-provider",
+        "rc-pagination",
+        "rc-picker",
+    ],
+};

examples/with-nextjs-auth/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "with-nextjs-auth",
+    "version": "3.25.0",
+    "private": true,
+    "scripts": {
+        "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 PORT=3001 next dev",
+        "build": "next build && rm -rf .next/cache",
+        "start:prod": "next start",
+        "lint": "eslint '**/*.{js,jsx,ts,tsx}'"
+    },
+    "dependencies": {
+        "@pankod/refine-antd": "^4.7.3",
+        "@pankod/refine-core": "^3.99.4",
+        "@pankod/refine-cli": "^1.17.0",
+        "@pankod/refine-nextjs-router": "^4.3.0",
+        "@pankod/refine-simple-rest": "^3.37.4",
+        "cross-env": "^7.0.3",
+        "next": "^13.0.6",
+        "nookies": "^2.5.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "^12.20.11",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/parser": "5.48.0",
+        "typescript": "^4.7.4"
+    }
+}

examples/with-nextjs-auth/pages/[[...refine]].tsx

@@ -0,0 +1,71 @@
+import {
+    NextRouteComponent,
+    checkAuthentication,
+    handleRefineParams,
+} from "@pankod/refine-nextjs-router";
+import dataProvider from "@pankod/refine-simple-rest";
+
+import { GetServerSideProps } from "next";
+
+import { API_URL } from "../src/constants";
+import { authProvider } from "../src/authProvider";
+
+export const getServerSideProps: GetServerSideProps<
+    { initialData?: unknown },
+    {
+        refine: [resource: string, action: string, id: string];
+    }
+> = async (context) => {
+    const { resource, action, id } = handleRefineParams(context.params?.refine);
+
+    const { isAuthenticated, ...props } = await checkAuthentication(
+        authProvider,
+        context,
+    );
+
+    if (!isAuthenticated) {
+        return props;
+    }
+
+    try {
+        if (resource && action === "show" && id) {
+            const data = await dataProvider(API_URL).getOne({
+                resource: resource.slice(resource.lastIndexOf("/") + 1),
+                id,
+            });
+
+            return {
+                props: {
+                    initialData: data,
+                },
+            };
+        } else if (resource && !action && !id) {
+            const data = await dataProvider(API_URL).getList({
+                resource: resource.slice(resource.lastIndexOf("/") + 1),
+            });
+
+            return {
+                props: {
+                    initialData: data,
+                },
+            };
+        }
+    } catch (error) {
+        return { props: {} };
+    }
+
+    return {
+        props: {},
+    };
+};
+
+export default NextRouteComponent;
+
+/**
+ * To define a custom initial route for refine to redirect and start with:
+ *
+ * Bind the `initialRoute` value to the `NextRouteComponent` like the following:
+ *
+ * export default NextRouteComponent.bind({ initialRoute: "/posts" });
+ *
+ **/

examples/with-nextjs-auth/pages/_app.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { AppProps } from "next/app";
+
+import { Refine } from "@pankod/refine-core";
+import {
+    notificationProvider,
+    Layout,
+    ErrorComponent,
+    AuthPage,
+} from "@pankod/refine-antd";
+import dataProvider from "@pankod/refine-simple-rest";
+import routerProvider from "@pankod/refine-nextjs-router";
+import "@pankod/refine-antd/dist/reset.css";
+
+import "@styles/global.css";
+
+import { authProvider } from "src/authProvider";
+import { API_URL } from "../src/constants";
+
+import { PostList, PostCreate, PostEdit, PostShow } from "@components";
+
+function MyApp({ Component, pageProps }: AppProps): JSX.Element {
+    return (
+        <Refine
+            routerProvider={routerProvider}
+            authProvider={authProvider}
+            dataProvider={dataProvider(API_URL)}
+            resources={[
+                { name: "users" },
+                {
+                    name: "posts",
+                    list: PostList,
+                    create: PostCreate,
+                    edit: PostEdit,
+                    show: PostShow,
+                    canDelete: true,
+                },
+            ]}
+            options={{ syncWithLocation: true }}
+            notificationProvider={notificationProvider}
+            /**
+             * `LoginPage` property is used to render `/login` page, which is the redirect path for unauthenticated users.
+             * Other auth pages, such as `/register`, `/forgot-password` etc. are not handled by refine.
+             * You need to create routes for them based on your router provider.
+             * In this example, we've created pages at `/pages` directory for the auth pages.
+             * Please check out `/pages/register.tsx`, `/pages/forgot-password.tsx` and `/pages/update-password.tsx` files for more details.
+             */
+            LoginPage={() => (
+                <AuthPage
+                    formProps={{
+                        initialValues: {
+                            email: "[email protected]",
+                            password: "password",
+                        },
+                    }}
+                />
+            )}
+            Layout={Layout}
+            catchAll={<ErrorComponent />}
+        >
+            <Component {...pageProps} />
+        </Refine>
+    );
+}
+
+export default MyApp;

examples/with-nextjs-auth/pages/_document.tsx

@@ -0,0 +1,13 @@
+import Document, { DocumentContext, DocumentInitialProps } from "next/document";
+
+class CustomDocument extends Document {
+    static async getInitialProps(
+        ctx: DocumentContext,
+    ): Promise<DocumentInitialProps> {
+        const initialProps = await Document.getInitialProps(ctx);
+
+        return initialProps;
+    }
+}
+
+export default CustomDocument;

examples/with-nextjs-auth/pages/forgot-password.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "@pankod/refine-antd";
+
+export default function ForgotPassword() {
+    return <AuthPage type="forgotPassword" />;
+}

examples/with-nextjs-auth/pages/register.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "@pankod/refine-antd";
+
+export default function Register() {
+    return <AuthPage type="register" />;
+}

examples/with-nextjs-auth/pages/update-password.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from "@pankod/refine-antd";
+
+export default function UpdatePassword() {
+    return <AuthPage type="updatePassword" />;
+}