#Redirect after Magic Link

19 messages · Page 1 of 1 (latest)

magic cloak
#

Hey there. I'm currently trying to redirect after using magic link login based off the "magic.link" website. I want it to first redirect to the "index.js" along with welcoming the user back. What code do I need to add in for the redirect to work? Do I need to edit the "next.config.js"? I want to work on an Application for my lesiure, and this is admittedly a bit puzzling. I will show the necessary code I have so far for key parts of my application. Let me know if you need any additional information.

next.config.js

module.exports = {
reactStrictMode: true,
}```

index.js
```js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )

login.js

import { Magic } from "@magic-sdk/admin";
import { setLoginSession } from "../../lib/auth";

export default async function login(req, res) {
  const magic = new Magic(process.env.MAGIC_SECRET_KEY);
  const didToken = req.headers.authorization.substr(7);
  const metadata = await magic.users.getMetadataByToken(didToken);
  await setLoginSession(res, metadata);
  res.send({ done: true });
}
oak sail
#

see #faq for sharing code on Discord (screenshots are bad -- pictures of a monitor are even worse)

magic cloak
#

(Oh, I'm sorry, I didn't know about those rules. How can I share this then to get help I need?)

oak sail
#

you also didn't show the code where you're actually hitting the login endpoint (fetch() or whatever)

oak sail
magic cloak
#

I'm reviewing it now. I'll edit my message once I got everything.

#

Okay I fixed it. Now I'm gonna wait for some help.

oak sail
magic cloak
#

Okay, I'll fix that.

#

It's gonna make my message too big, so I'll just add it here.

login.jsx

import React from "react";
import TextField from "@material-ui/core/TextField";
import Container from "@material-ui/core/Container";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import { useForm } from "react-hook-form";
import { Magic } from "magic-sdk";
import Router from "next/router";

export default function LoginPage() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = async ({ email }) => {
    const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
    const didToken = await magic.auth.loginWithMagicLink({ email });
    const res = await fetch("/api/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + didToken,
      },
      body: JSON.stringify({ email }),
    });
    if (res.status === 200) {
      // redirect
      Router.push("/");
    } else {
      // display an error
    }
  };
  return (
    <Container maxWidth="xs">
      <h1>Hello</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box mb={2}>
          <TextField
            variant="outlined"
            label="email"
            fullWidth
            autoComplete="email"
            autoFocus
            {...register("email", {
              required: "Required field",
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                message: "Invalid email address",
              },
            })}
            error={!!errors?.email}
            helperText={errors?.email ? errors.email.message : null}
          />
        </Box>
        <Button type="submit" variant="contained" color="primary" fullWidth>
          Login In / Sign Up
        </Button>
      </form>
    </Container>
  );
}
#

I hope that's what was needed. What I need to do is figure out how to redirect it to the index.js, and also say something like "Welcome back insert user email here!". Cause right now it doesn't do anything. I do get the magic link for login, but there's no redirect to index.js after clicking on it for verification.

oak sail
#

ugh. I should have googled magic link at the start... more web3 garbage

magic cloak
#

Oh geez. Yeah, reason why I'm using Magic link is because I'm again doing it for leisure. Like a personal project on why it's better than using passwords. Found some interesting facts regarding it too, like how much of IT support calls are password related.

oak sail
#

they have a million guides. read them

magic cloak
#

I’ll take a look at it. Thank you. I’ll get back to you when I solve it.

magic cloak
#

To be honest I’m still finding myself confused because there’s no clear answer for how to implement a redirect in the code. I’m trying to implement it in the next.config.js file using this:

module.exports = {
  async redirects() {
      return [
          { 
              source: ‘/‘,
              destination: ‘/lib/pages’,
              permanent: true,
          },
      ]
   },
}