I am having issue authing with magicLink

here is the full code

import Image from "next/image";
import { useMoralis } from "react-moralis";
import styles from "../styles/Home.module.css";
import Button from '@mui/material/Button';

import Logo from "../Assets/IzeBho-real.png";
import  React,{ useState } from "react";

export default function SignIn() {
  const { authenticate, isAuthenticated, authError, isAuthenticating } =

    const customNodeOptions = {
  chainId: 80001, // Your own node's chainId

{/**const magicLink = new Magic("pk_live_8ABCEDAA72407E22", {
  network: customNodeOptions,
}); */}

  const [email, setEmail] = useState(" ");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: "pk_live_8ABCEDAA72407E22",
      network: "kovan",

  return (
    <div className={styles.card}>
      <Image alt='IzeBho' className={styles.img} src={Logo} width={80} height={80} />
      {isAuthenticating && <p className={styles.green}>Authenticating</p>}
      {authError && (
        <p className={styles.error}>{JSON.stringify(authError.message)}</p>
      <div className={styles.buttonCard}>
          onChange={(e) => {

        <Button variant="contained" className={styles.loginButton} onClick={handleCustomLogin}>
          Login with Email

What is your issue exactly?

Server Error
NoMoralisContextProviderError: Make sure to only call useMoralis within a  <MoralisProvider>

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Look at this page under Quick Start: https://github.com/MoralisWeb3/react-moralis

1 Like

that the code your using is part of a context. youll need to wrap your app compoennt in your index.jsfil einside that MoralisProvider from your error message