Try   HackMD

Vercel NextJS

https://vercel.com/guides/add-auth-to-nextjs-with-magic

What's Missing:

  1. Missing a Github repo to be cloned and follow along at home
  • threfore I've had to create the folders/directories from scratch
  • stage the Github repo with commits, and go through the different tutorial and each step is one step
  • you add some code to step 1, edit the code in step 2, and step 3 even more code, final version is on github website

Github repo tutorial
with my own markdown, with new tutorial

  1. make sure dev is installed

npm run dev

  1. no longer use "pk_test"

Clarification:

Confusion 1

"Grab both the publishable and secret keys and place them in the environment (.env.local) file like below. Also, we'll add ENCRYPTION_SECRET, which will be used for encryption. You should create your own secret."

Unclear to me if I am creating my own file

loginWithMagicLink

Within a Magic package

Magic.loginWithMagicLink
within Magic object, there is an auth attribute that has a login method, it's not directly calling Magic.loginWithMagicLink but it's going through auth and a Magic instance


Confusion 2

This could be more clear, of what should be copy & pasted

ie this

// the magic code const did = await new Magic( process.env.NEXT_PUBLIC_MAGIC_PUB_KEY, ).auth.loginWithMagicLink({ email: elements.email.value }); // Once we have the did from magic, login with our own API const authRequest = await fetch('/api/login', { method: 'POST', headers: { Authorization: `Bearer ${did}` }, }); if (authRequest.ok) { // We successfully logged in, our API // set authorization cookies and now we // can redirect to the dashboard! router.push('/dashboard'); } else { /* handle errors */ } };

should replace this:

    // Add the Magic code here

    // Once we have the token from magic,
    // update our own database

    // const authRequest = await fetch()

    // if (authRequest.ok) {
    // We successfully logged in, our API
    // set authorization cookies and now we
    // can redirect to the dashboard!
    // router.push('/dashboard')
    // } else { /* handle errors */ }
  };

Confusion 3

so this portion confuses me, as to what the guide wants me to do here
https://vercel.com/guides/add-auth-to-nextjs-with-magic#issue-an-authorization-token
but also the guide says, for this exercise we also won’t be doing something

basically what this section is saying is: "hey you don't need to anything yet, this is just a place holder"

  1. First step is DID
  2. send step is api/login.jS - using DID and passing it in the body. The body is usually given in a JSON format


this is the updated codebase once you fill out the template from the original template at the beginning of the tutorial

this is the step to integrate the API, by copy & pasting below the comment

const did = magic.utils.parseAuthorizationHeader(req.headers.authorization); const user = await magic.users.getMetadataByToken(did);


Confusion 4

Rather than using hapi/iron, might consider which might simplify the code a bit:
https://github.com/vvo/iron-session


Confusion 5

It isn’t clear if the recommendation is client-side auth or server-side auth

API is always run on the server-side
// pages/api/login.js

// pages/login.js
is what you download onto your browser and that's client-side
one line of code for the client-side

  1. Create a cookies.js

https://vercel.com/guides/add-auth-to-nextjs-with-magic#persisting-authorization-state


Run the program

ensure that the setup.sh and run.sh are in the src directory

setup SH Script

create a setup.sh in the top directory and copy over all the install terminal commands such as:

yarn add magic-sdk

yarn add @hapi/iron

yarn add swr

npm install dev

and then create run.sh
include npm run dev

Errors after running the application


need to import Magic
article assumes I had known to import Magic

// pages/login.js import { Magic } from 'magic-sdk';

expose the hidden .env.local file in the src directory, if you have a Mac then it's

cmd+.+shift

do not publish private key in github

replace encryption secret with 123456

control+c to stop the server
and rerun the sh run.sh to rerun the server reloading the environmental variables

does environmental variables

  1. Replace
    process.env.NEXT_PUBLIC_MAGIC_PUB_KEY in //pages/login.js with my public API Key with one quote not double quote

https://magic.crisp.help/en/article/internal-server-error-trace-id-jywvam/


in //pages/index.js i had replaced <link> with but move it back to </link> and import link

  1. dependencies in package.json
  2. update encrypton key up to 32 characters

Cookies error


Josh's feedback


Resources

8 hours to debug 100 lines of code

How to upload package
https://www.google.com/search?q=upload+a+javascript+package+to+npm&ei=APDaY9GYG_7m5NoP0NqW8A8&ved=0ahUKEwjRmIvFt_X8AhV-M1kFHVCtBf4Q4dUDCBA&uact=5&oq=upload+a+javascript+package+to+npm&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCCEQoAEyCwghEBYQHhDxBBAdOgoIABBHENYEELADOgUIIRCrAjoICCEQFhAeEB1KBAhBGABKBAhGGABQgQpYhRBg4xBoAXABeACAAV2IAe4BkgEBM5gBAKABAcgBCMABAQ&sclient=gws-wiz-serp


Josh's Write

Magic is a plug and play SDK that supports a variety of passwordless login methods, including email magic links, WebAuthn, and social login - Facebook, Google, Twitter, LinkedIn, Discord and more. It allows companies to easily and securely onboard and authenticate users, creating non-custodial wallets for them in the process.

In this guide, we’re going to take a look at how to integrate Magic with Next.js, using Magic’s “magic link” login and utilizing Next.js’ API routes for our validation. We'll also look at how to use React’s Context hook to ensure a fluid user experience for our app.

Let's start by forking and cloning down this starter code. This repo was created by using npx create-next-app and has all the starter files you’ll need, along with some added stylings. You'll want to be fairly familiar with how Next.js works before going any further (if not, check out their tutorial). As we work through tutorial, here is what we want our user flow to look like:

  1. A user visits our app, enters their email address, and clicks the Send Magic Link button.
  2. They click the link sent to their email and Magic authenticates them.
  3. Our app stores their metadata and redirects them to the dashboard page.
  4. The user is able to view their account.

Repositories

Starter Code: https://github.com/magiclabs/vercel-magic-guide-boilerplate

Completed Code for reference: https://github.com/magiclabs/vercel-magic-guide

Getting started

Once you have forked and cloned the starter repo, you’ll want to take the following steps:

  1. Install the dependencies

    ​​​​npm install
    ​​​​# or
    ​​​​yarn install
    
  2. Run the development server

    ​​​​npm run dev
    ​​​​# or
    ​​​​yarn dev
    
  3. Open http://localhost:3000 with your browser to see the result.

Creating the first pages

First we’re going to get our context set up so that our user information is available throughout our app. Navigate to lib/UserContext.js and add the following code to create our Context object.

// lib/UserContext.js
import { createContext } from "react";

export const UserContext = createContext(null);

Then navigate to pages/_app.js so that we can wrap our app in the Provider component and initialize our user state. This will make it so all of our pages have access to user and setUser.

// pages/_app.js
import "@/styles/globals.css";
import { useState } from "react";
import { UserContext } from "@/lib/UserContext";

export default function App({ Component, pageProps }) {
  const [user, setUser] = useState();

  return (
    <UserContext.Provider value={[user, setUser]}>
      <Component {...pageProps} />
    </UserContext.Provider>
  );
}

Next, we’re going to create the scaffolding for our login and dashboard pages. Open up pages/login.js and add the following.

// pages/login.js
import { useContext, useState } from "react";
import { UserContext } from "@/lib/UserContext";

export default function Login() {
// Allows us to access the user state and update it within this page
  const [user, setUser] = useContext(UserContext);
// Our email state that we'll use for our login form
  const [email, setEmail] = useState("");

  const handleLogin = async (e) => {
    e.preventDefault();

		// We'll fill in the rest of this later

  };

  return (
    <form onSubmit={handleLogin}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Send Magic Link</button>
    </form>
  );
}

Then open up pages/dashboard.js. This will be the page our user sees once they’ve signed in through Magic.

// pages/dashboard.js
import { useContext } from "react";
import { UserContext } from "@/lib/UserContext";

export default function Dashboard() {
  const [user, setUser] = useContext(UserContext);

  const logout = () => {
		// We'll fill this out later
  };

  return (
    <>
			{/* We check here to make sure user exists before attempting to access its data */}
      {user?.issuer && (
        <>
          <h1>Dashboard</h1>
          <h2>Email</h2>
          <p>{user.email}</p>
          <h2>Wallet Address</h2>
          <p>{user.publicAddress}</p>
          <button onClick={logout}>Logout</button>
        </>
      )}
    </>
  );
}

Lastly, we’re going to add some simple loading functionality so our users don’t see a blank page while our app loads. Add the following to pages/index.js.

// pages/index.js
import { useContext } from "react";
import { UserContext } from "@/lib/UserContext";

export default function Home() {
	// Allow this component to access our user state
  const [user] = useContext(UserContext);

  return <div>
						{/* Check to see if we are in a loading state and display a message if true */}
						{user?.loading && <p>Loading...</p>}
					</div>;
}

Set up Magic integration

Our first step in integrating Magic is by creating an account, which you can do by heading over to magic.link. You’ll then create a new Magic Auth app, which will provide you with your API keys as seen below.

Screen Shot 2023-02-03 at 12.27.11 PM.png

In your codebase, rename .env.local.example to .env.local and add your publishable API key and secret key to it.

// .env.local
NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY="YOUR_PUBLISHABLE_API_KEY"
MAGIC_SECRET_KEY="YOUR_SECRET_KEY"

We are then going to create a helper function that we will use to create our Magic instances. This instance will allow us access to all of Magic’s methods and connect us to the Ethereum Network (Magic allows us to connect to 20+ blockchains). Navigate to lib/magic.js.

// lib/magic.js
import { Magic } from "magic-sdk";

const createMagic = (key) => {
	// We make sure that the window object is available
	// Then we create a new instance of Magic using a publishable key
  return typeof window !== "undefined" && new Magic(key);
};

// Pass in your publishable key from your .env file
export const magic = createMagic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);

We are now able to easily create new instances of Magic wherever needed, keeping our code DRY.

Authenticate with Magic

Magic is built using principles of distributed security. They run a secure in-house operation that delegates most of the security storage to Amazon's Hardware Security Module or HSM (you can learn more about HSMs and how Magic uses them in their security documentation). Not even Magic employees have access to the HSM. They've locked everyone out of ever getting access to the keys stored there.

Since Magic runs in this distributed manner, their authentication returns a decentralized identifier. This identifier can be exchanged with Magic for information about the user. Once we have that DID, we know that Magic has successfully authenticated that user and our app can take over.

To start, let’s take care of our login API endpoint which we’ll be using shortly in our login page. This will be how we validate the user’s DID token and issue an authentication token in return. We’ll be using Magic’s server-side SDK for this.

import { Magic } from "@magic-sdk/admin";

// Create an instance of magic admin using our secret key (not our publishable key)
let mAdmin = new Magic(process.env.MAGIC_SECRET_KEY);

export default async function login(req, res) {
  try {
		// Grab the DID token from our headers and parse it
    const didToken = mAdmin.utils.parseAuthorizationHeader(
      req.headers.authorization
    );
		// Validate the token and send back a successful response
    await mAdmin.token.validate(didToken);
    res.status(200).json({ authenticated: true });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

Now let’s go back and finish our login page. We’re going to be filling out the handleLogin function by utilizing our new endpoint that we created in pages/api/login.js. We’ll also add a useEffect hook to check if a user is already logged in, and if so, route them to the dashboard.

Within our handleLogin function,loginWithMagicLink will send an email to the user and they will follow a secure authentication process outside of our application.

Once the user has successfully authenticated with Magic, they'll be instructed to return to our app. At that point, Magic will return a DID which we can use as a token in our application. This token will then be sent to our server-side implementation of Magic’s SDK where we can validate it and issue an authorization token so that the user has access to our app. Upon receiving a successful response, we retrieve the user’s metadata, store it in our user context, and route them to the dashboard.

// pages/login.js
import { useContext, useState, useEffect } from "react";
import { UserContext } from "@/lib/UserContext";
import { useRouter } from "next/router";
import { magic } from "@/lib/magic";

export default function Login() {
  const [user, setUser] = useContext(UserContext);
  const [email, setEmail] = useState("");
	// Create our router
  const router = useRouter();
	
	// Make sure to add useEffect to your imports
  useEffect(() => {
		// Check for an issuer on our user object. If it exists, route them to the dashboard.
    user?.issuer && router.push("/dashboard");
  }, [user]);

  const handleLogin = async (e) => {
    e.preventDefault();
		
		// Log in using our email with Magic and store the returned DID token in a variable
    try {
      const didToken = await magic.auth.loginWithMagicLink({
        email,
      });
			
			// Send this token to our validation endpoint
      const res = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
          Authorization: `Bearer ${didToken}`,
        },
      });

			// If successful, update our user state with their metadata and route to the dashboard
      if (res.ok) {
        const userMetadata = await magic.user.getMetadata();
        setUser(userMetadata);
        router.push("/dashboard");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Send Magic Link</button>
    </form>
  );
}

Persisting authorization state and logging out

By default, Magic allows users to remain authenticated for up to 7 days, so long as they don’t logout or clear their browser data (this can be extended up to 90 days with Magic Auth Plus). In our case, once a user has been authenticated, we don’t want them to have to repeat this login process every time they leave our site and come back. To accomplish this, we are going to utilize another useEffect along with Magic’s isLoggedIn method, which will return true if they have an authenticated token stored in cookies, and false if not. Open up pages/_app.js and add the following.

// pages/_app.js
import "@/styles/globals.css";
import { useState, useEffect } from "react";
import { UserContext } from "@/lib/UserContext";
import { useRouter } from "next/router";
import { magic } from "@/lib/magic";

export default function App({ Component, pageProps }) {
  const [user, setUser] = useState();
	// Create our router
  const router = useRouter();

  useEffect(() => {
		// Set loading to true to display our loading message within pages/index.js
    setUser({ loading: true });
		// Check if the user is authenticated already
    magic.user.isLoggedIn().then((isLoggedIn) => {
      if (isLoggedIn) {
				// Pull their metadata, update our state, and route to dashboard
        magic.user.getMetadata().then((userData) => setUser(userData));
        router.push("/dashboard");
      } else {
				// If false, route them to the login page and reset the user state
        router.push("/login");
        setUser({ user: null });
      }
    });
		// Add an empty dependency array so the useEffect only runs once upon page load
  }, []);

  return (
    <UserContext.Provider value={[user, setUser]}>
      <Component {...pageProps} />
    </UserContext.Provider>
  );
}

Now that we’re able to authenticate our user and persist this state, we are going to give them the ability to log out. This is a quick and easy final step with Magic. Open up pages/dashboard.js and add the following.

// pages/dashboard.js
import { useContext } from "react";
import { UserContext } from "@/lib/UserContext";
import { magic } from "@/lib/magic";
import { useRouter } from "next/router";

export default function Dashboard() {
  const [user, setUser] = useContext(UserContext);
	// Create our router
  const router = useRouter();

  const logout = () => {
		// Call Magic's logout method, reset the user state, and route to the login page
    magic.user.logout().then(() => {
      setUser({ user: null });
      router.push("/login");
    });
  };

  return (
    <>
      {user?.issuer && (
        <>
          <h1>Dashboard</h1>
          <h2>Email</h2>
          <p>{user.email}</p>
          <h2>Wallet Address</h2>
          <p>{user.publicAddress}</p>
          <button onClick={logout}>Logout</button>
        </>
      )}
    </>
  );
}

And that’s it! Our app is now able to create new wallets and securely authenticate users, all without passwords.

Next steps

Head over to the Magic docs and experiment with integrating other features of the Magic SDK. You could try adding in login via SMS or maybe some social logins. Also, by incorporating either the Ethers.js or Web3.js libraries, you can add in the functionality for your users to sign and send transactions.