I have create a login form with two fields
- a field where the user can select their university
- a field where the user can enter their university email address
I use next-auth's Email Provider under the hood, so when they fill out those two fields and click on "sign up", a document will automatically be created by default in my MongoDB "users" collection that looks like this
email: 'theuseremail@something.com',
emailVerified: '2022-07-16T11:54:06.848+00:00'
and the user gets an email with a magic sign link to sign in to the website.
My problem is the following: I want to be able to store not just the user email but also the university they selected when filling out the sign up form. But the object that gets created by default in my MongoDB only has the "email" and the "emailVerified" fields. I cannot find a way to capture other data (e.g. the user's selected university) to create the user in the database.
Is there any obvious way of doing so that I am missing? I have looked around but couldn't find any working example of this! Any help is appreciated.
This is my pages/api/[...nextAuth].js file:
import NextAuth from "next-auth"
import nodemailer from 'nodemailer'
import EmailProvider from 'next-auth/providers/email'
import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
import clientPromise from "../../../utils/mongoClientPromise"
const THIRTY_DAYS = 30 * 24 * 60 * 60
const THIRTY_MINUTES = 30 * 60
export default NextAuth({
secret: process.env.NEXTAUTH_SECRET,
session: {
strategy: 'jwt',
maxAge: THIRTY_DAYS,
updateAge: THIRTY_MINUTES
},
adapter: MongoDBAdapter(clientPromise),
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: process.env.EMAIL_SERVER_PORT,
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD
}
},
from: process.env.EMAIL_FROM,
async sendVerificationRequest ({
identifier: email,
url,
provider: { server, from }
}) {
const { host } = new URL(url)
const transport = nodemailer.createTransport(server)
await transport.sendMail({
to: email,
from,
subject: `Sign in to ${host}`,
text: text({ url, host }),
html: html({ url, host, email })
})
}
})
],
pages: {
signIn: '/login',
}
})
function html ({ url, host, email }) {
const escapedEmail = `${email.replace(/\./g, '​.')}`
const escapedHost = `${host.replace(/\./g, '​.')}`
// Your email template here
return `
<body>
<h1>Your magic link! </h1>
<h3>Your email is ${escapedEmail}</h3>
<p>
<a href="${url}">Sign in to ${escapedHost}</a>
</body>
`
}
// Fallback for non-HTML email clients
function text ({ url, host }) {
return `Sign in to ${host}\n${url}\n\n`
}
This is my Login page in pages/login.tsx:
import { Row, Col, Button, Input, Form, Space } from "antd";
import { useSession, signIn } from "next-auth/react";
import { getCsrfToken } from "next-auth/react"
import { useRouter } from 'next/router';
import { useState } from "react";
import UniversitySearchAndSelectDropdown from "../components/UniversitySearchAndSelectDropdown";
import data from '../mock_api_payload.json'
export default function LoginPage({ csrfToken }) {
const navigate = useRouter();
const { data: session } = useSession()
const [selectedUniversityId, setSelectedUniversityId] = useState('');
const [form] = Form.useForm();
if (session) {
navigate.push("/")
}
if (!session) {
return (
<>
<Row justify="center" style={{marginTop: '2rem'}}>
<Col>
<form method="post" action="/api/auth/signin/email">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<Row justify="center">
<Col>
<Space direction="vertical">
<Input
placeholder="Enter your university email address"
type="email"
id="email"
name="email"
/>
</Space>
</Col>
</Row>
<Row justify="center" style={{marginTop: '1rem'}}>
<Col>
<Button
htmlType="submit"
shape="round"
type="primary"
>Sign in</Button>
</Col>
</Row>
</form>
</Col>
</Row>
</>
)
}
};
export async function getServerSideProps(context: any) {
const csrfToken = await getCsrfToken(context)
return {
props: { csrfToken },
}
}
Thank you!