feat: add Moralis as an server infrastructure and wallet authenticati…

…on method

.env.local.example

@@ -0,0 +1,2 @@
+SERVER_URL=
+APP_ID=

README.md

@@ -5,6 +5,8 @@
 - [Yarn](https://yarnpkg.com)
 - [NextJS](https://nextjs.org)
 - [TypeScript](https://www.typescriptlang.org)
+- [Moralis](https://moralis.io)
+- [web3auth](https://web3auth.io)
 - [tailwindcss](https://tailwindcss.com)
 - [Husky](https://github.com/typicode/husky)
 - [Lint-staged](https://github.com/okonet/lint-staged)

package.json

@@ -13,9 +13,14 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
+    "@walletconnect/web3-provider": "^1.7.7",
+    "@web3auth/web3auth": "^0.9.2",
+    "magic-sdk": "^8.1.0",
+    "moralis": "^1.5.9",
     "next": "12.1.5",
     "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "react-moralis": "^1.3.5"
   },
   "devDependencies": {
     "@types/node": "17.0.24",

src/components/layouts/Dashboard/modules/Nav/Nav.tsx

@@ -2,6 +2,9 @@ import { Disclosure } from '@headlessui/react';
 import { MenuIcon, XIcon } from '@heroicons/react/outline';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { useMoralis } from 'react-moralis';
 
 const Nav = () => {
   const user = {
@@ -21,6 +24,14 @@ const Nav = () => {
     // { name: 'Settings', href: '#' },
     { name: 'Sign out', href: '#' },
   ];
+
+  const { isAuthenticated, logout } = useMoralis();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) router.replace('/');
+  }, [isAuthenticated]);
+
   return (
     <Disclosure as="nav" className="bg-gray-800">
       {({ open }) => (
@@ -35,6 +46,9 @@ const Nav = () => {
                     </a>
                   </Link>
                 </div>
+                <button className="hover:underline" onClick={logout}>
+                  Sign Out
+                </button>
                 <div className="hidden md:block">
                   <div className="ml-10 flex items-baseline space-x-4">
                     {navigation.map((item) => (

src/components/layouts/Landing/modules/Nav/Nav.tsx

@@ -1,15 +1,32 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { useMoralis } from 'react-moralis';
+
 const Nav = () => {
   // const navigation = [
   //   { name: 'Profile', href: '#' },
   //   { name: 'Other', href: '#' },
   // ];
+  const { isAuthenticated, authenticate, logout } = useMoralis();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isAuthenticated) router.replace('/profile');
+  }, [isAuthenticated]);
 
   return (
     <nav className="container flex min-w-full items-center justify-between p-7 md:px-40">
       <span className=" text-gray-900 text-xl font-bold hover:cursor-default">
         NextJS Starter
       </span>
-      <button className="hover:underline">Log In</button>
+      <button
+        className="hover:underline"
+        onClick={() =>
+          authenticate({ signingMessage: 'Authorize linking of your wallet' })
+        }
+      >
+        Sign In
+      </button>
     </nav>
   );
 };

src/pages/_app.tsx

@@ -1,8 +1,21 @@
 import type { AppProps } from 'next/app';
 import 'tailwindcss/tailwind.css';
+import { MoralisProvider } from 'react-moralis';
+
+const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
+const APP_ID = process.env.NEXT_PUBLIC_APP_ID;
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  if (!APP_ID || !SERVER_URL)
+    throw new Error(
+      'Missing Moralis Application ID or Server URL. Make sure to set your .env file.'
+    );
+
+  return (
+    <MoralisProvider serverUrl={SERVER_URL} appId={APP_ID}>
+      <Component {...pageProps} />
+    </MoralisProvider>
+  );
 }
 
 export default MyApp;

src/utils/utils.tsx

@@ -1,4 +1,5 @@
 export const classNames = (...classes: string[]) => {
+  // to merge conditional classes in styling
   return classes.filter(Boolean).join(' ');
 };