Merge pull request #2187 from Web3Auth/feat/ssr

Adds ssr support in web3auth SDK

Author: chaitanyapotti

README.md

@@ -51,7 +51,7 @@ Hop on to the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a
 Web3Auth needs to initialise as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialisation is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for Ethereum blockchain will look like this:
 
 ```js
-import { Web3Auth } from "@web3auth/modal";
+import { Web3Auth } from "web3auth";
 
 //Initialize within your constructor
 const web3auth = new Web3Auth({
@@ -62,7 +62,7 @@ const web3auth = new Web3Auth({
   },
 });
 
-await web3auth.initModal();
+await web3auth.init();
 ```
 
 ### Login your User

demo/nextjs-ssr-app/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals",
+  "ignorePatterns": ["*.config.js"]
+}

demo/nextjs-ssr-app/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

demo/nextjs-ssr-app/README.md

@@ -0,0 +1,41 @@
+# Web3Auth (`@web3auth/modal`) x EVM x Next.js
+
+[![Web3Auth](https://img.shields.io/badge/Web3Auth-SDK-blue)](https://web3auth.io/docs/sdk/pnp/web/modal)
+[![Web3Auth](https://img.shields.io/badge/Web3Auth-Community-cyan)](https://community.web3auth.io)
+
+[Join our Community Portal](https://community.web3auth.io/) to get support and stay up to date with the latest news and updates.
+
+This example demonstrates how to use Web3Auth with EVM in Next.js
+
+## How to Use
+
+### One-Click Deploy to Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWeb3Auth%2Fweb3auth-pnp-examples%2Ftree%2Fmain%2Fweb-modal-sdk%2Fquick-starts%2Fnextjs-modal-quick-start&project-name=w3a-nextjs-modal&repository-name=w3a-nextjs-modal)
+
+### Download Manually
+
+```bash
+npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/quick-starts/nextjs-no-modal-quick-start w3a-example
+```
+
+Install & Run:
+
+```bash
+cd w3a-example
+npm install
+npm run dev
+# or
+cd w3a-example
+yarn
+yarn dev
+```
+
+## Important Links
+
+- [Website](https://web3auth.io)
+- [Docs](https://web3auth.io/docs)
+- [Guides](https://web3auth.io/docs/guides)
+- [SDK / API References](https://web3auth.io/docs/sdk)
+- [Pricing](https://web3auth.io/pricing.html)
+- [Community Portal](https://community.web3auth.io)

demo/nextjs-ssr-app/app/favicon.ico

@@ -0,0 +1,126 @@
+.container {
+  width: 60%;
+  margin: auto;
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  line-height: 1.15;
+  font-size: 3rem;
+  text-align: center;
+  margin: 50px;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.console {
+  max-width: 100%;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+  overflow-wrap: break-word;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px;
+  margin: 30px 0;
+  background: #f4f5f7;
+  border: 1px solid #ebecf0;
+  border-radius: 5px;
+}
+
+.card {
+  margin: 0.5rem;
+  padding: 0.7rem;
+  text-align: center;
+  color: #0070f3;
+  text-decoration: none;
+  border: 1px solid #0070f3;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  width: 100%;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  cursor: pointer;
+  background-color: #fafafa;
+}
+
+.row {
+  display: flex;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+.label {
+  flex-basis: 45%;
+  padding-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  font-weight: bold;
+}
+
+.select {
+  flex-basis: 30%;
+  text-align: left;
+  padding: 0.3rem 0.8rem;
+  font-size: 1rem;
+  border-radius: 8px;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10rem;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.logo {
+  height: 1.5rem;
+  margin-left: 0.5rem;
+}
+
+/* @media (max-width: 1200px) {
+  .container {
+    width: 100%;
+  }
+} */

demo/nextjs-ssr-app/app/globals.css

@@ -0,0 +1,27 @@
+import "./globals.css";
+
+import { Inter } from "next/font/google";
+
+import Provider from "@/components/provider";
+import { cookieToWeb3AuthState } from "@web3auth/modal";
+import { headers } from "next/headers";
+import { cookieToInitialState } from "wagmi";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Web3Auth NextJS Quick Start",
+  description: "Web3Auth NextJS Quick Start",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const web3authInitialState = cookieToWeb3AuthState((headers()).get('cookie'))
+  console.log("web3authInitialState", web3authInitialState)
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Provider web3authInitialState={web3authInitialState}>{children}</Provider>
+      </body>
+    </html>
+  );
+}

demo/nextjs-ssr-app/app/layout.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import Main from "@/components/Main";
+
+export default function Home() {
+  return <Main />
+}