custom next auth pages
This commit is contained in:
@@ -1,8 +1,84 @@
|
|||||||
import NextAuth from "next-auth";
|
import NextAuth from "next-auth";
|
||||||
import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter";
|
|
||||||
import EmailProvider from "next-auth/providers/email";
|
import EmailProvider from "next-auth/providers/email";
|
||||||
import * as entities from "../../../lib/entities";
|
import { PrismaAdapter } from "@next-auth/prisma-adapter";
|
||||||
|
import { PrismaClient } from "@prisma/client";
|
||||||
|
import nodemailer from "nodemailer";
|
||||||
|
|
||||||
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
|
// async function 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 }),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// Email HTML body
|
||||||
|
function html({ url, host, email }) {
|
||||||
|
// Insert invisible space into domains and email address to prevent both the
|
||||||
|
// email address and the domain from being turned into a hyperlink by email
|
||||||
|
// clients like Outlook and Apple mail, as this is confusing because it seems
|
||||||
|
// like they are supposed to click on their email address to sign in.
|
||||||
|
const escapedEmail = `${email.replace(/\./g, "​.")}`;
|
||||||
|
const escapedHost = `${host.replace(/\./g, "​.")}`;
|
||||||
|
|
||||||
|
// Some simple styling options
|
||||||
|
const backgroundColor = "#ffffff";
|
||||||
|
const textColor = "#444444";
|
||||||
|
const mainBackgroundColor = "#ffffff";
|
||||||
|
const buttonBackgroundColor = "#aa1111";
|
||||||
|
const buttonBorderColor = "#aa1111";
|
||||||
|
const buttonTextColor = "#ffffff";
|
||||||
|
const headerBackgroundColor = "#000000";
|
||||||
|
|
||||||
|
return `
|
||||||
|
<body style="background: ${backgroundColor};">
|
||||||
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center" style="padding: 10px 0px 20px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: #fff;background-color: ${headerBackgroundColor};border-bottom: 10px solid #ffd530;>
|
||||||
|
|
||||||
|
<strong>PEDW - Planning Casework</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<table width="100%" border="0" cellspacing="20" cellpadding="0" style="background: ${mainBackgroundColor}; max-width: 600px; margin: auto; border-radius: 10px;">
|
||||||
|
<tr>
|
||||||
|
<td align="center" style="padding: 10px 0px 0px 0px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
|
||||||
|
Sign in as <strong>${escapedEmail}</strong>
|
||||||
|
</td>
|
||||||
|
<img src ="http://localhost:3000/assets/images/planning-casework-en.svg"/>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="center" style="padding: 20px 0;">
|
||||||
|
<table border="0" cellspacing="0" cellpadding="0">
|
||||||
|
<tr>
|
||||||
|
<td align="center" style="border-radius: 5px;" bgcolor="${buttonBackgroundColor}"><a href="${url}" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${buttonTextColor}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${buttonBorderColor}; display: inline-block; font-weight: bold;">Sign in</a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="center" style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${textColor};">
|
||||||
|
If you did not request this email you can safely ignore it.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Email Text body (fallback for email clients that don't render HTML, e.g. feature phones)
|
||||||
|
function text({ url, host }) {
|
||||||
|
return `Sign in to PEDW - Planning Casework\n${url}\n\n`;
|
||||||
|
}
|
||||||
// For more information on each option (and a full list of options) go to
|
// For more information on each option (and a full list of options) go to
|
||||||
// https://next-auth.js.org/configuration/options
|
// https://next-auth.js.org/configuration/options
|
||||||
export default NextAuth({
|
export default NextAuth({
|
||||||
@@ -19,19 +95,35 @@ export default NextAuth({
|
|||||||
},
|
},
|
||||||
from: process.env.EMAIL_FROM,
|
from: process.env.EMAIL_FROM,
|
||||||
maxAge: 10 * 60, // Magic links are valid for 10 min only
|
maxAge: 10 * 60, // Magic links are valid for 10 min only
|
||||||
|
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 PEDW - Planning Casework`,
|
||||||
|
text: text({ url, host }),
|
||||||
|
html: html({ url, host, email }),
|
||||||
|
});
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
adapter: TypeORMLegacyAdapter({
|
adapter: PrismaAdapter(prisma),
|
||||||
type: "mysql",
|
|
||||||
database:
|
|
||||||
"mysql://nextAuthAdmin:!Sky9fish1972@77.68.17.157:3306/nextauthDB?synchronise=true",
|
|
||||||
synchronize: false,
|
|
||||||
}),
|
|
||||||
secret: "SuperSecret",
|
|
||||||
session: {
|
session: {
|
||||||
jwt: true,
|
jwt: true,
|
||||||
pages: {},
|
pages: {},
|
||||||
theme: "dark",
|
theme: "dark",
|
||||||
debug: true,
|
debug: true,
|
||||||
},
|
},
|
||||||
|
pages: {
|
||||||
|
signIn: "/auth/signin",
|
||||||
|
//signOut: "/auth/signout",
|
||||||
|
error: "/auth/error", // Error code passed in query string as ?error=
|
||||||
|
verifyRequest: "/auth/verify-request", // (used for check email message)
|
||||||
|
// newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -0,0 +1,80 @@
|
|||||||
|
import useTranslation from "next-translate/useTranslation";
|
||||||
|
import Head from "next/head";
|
||||||
|
import Link from "next/link";
|
||||||
|
import CookieBanner from "../../components/cookieBanner";
|
||||||
|
import Footer from "../../components/footer";
|
||||||
|
import Header from "../../components/header";
|
||||||
|
import Breadcrumbs from "../../components/breadcrumbs";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
import { getCsrfToken } from "next-auth/react";
|
||||||
|
|
||||||
|
const Error = (props) => {
|
||||||
|
let { t, lang } = useTranslation();
|
||||||
|
const { footerLinks, pages, csrfToken } = props;
|
||||||
|
|
||||||
|
const { error } = useRouter().query;
|
||||||
|
|
||||||
|
const errors = {
|
||||||
|
Signin: "Try signing with a different account.",
|
||||||
|
OAuthSignin: "Try signing with a different account.",
|
||||||
|
OAuthCallback: "Try signing with a different account.",
|
||||||
|
OAuthCreateAccount: "Try signing with a different account.",
|
||||||
|
EmailCreateAccount: "Try signing with a different account.",
|
||||||
|
Callback: "Try signing with a different account.",
|
||||||
|
OAuthAccountNotLinked:
|
||||||
|
"To confirm your identity, sign in with the same account you used originally.",
|
||||||
|
EmailSignin: "Check your email address.",
|
||||||
|
CredentialsSignin:
|
||||||
|
"Sign in failed. Check the details you provided are correct.",
|
||||||
|
Verification:
|
||||||
|
"Unable to sign in. The sign in link is no longer valid.It may have been used already or it may have expired. ",
|
||||||
|
default: "Unable to sign in.",
|
||||||
|
};
|
||||||
|
|
||||||
|
const errorMessage = error && (errors[error] ?? errors.default);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>Sign in Error - {t("common:service-name")}</title>
|
||||||
|
</Head>
|
||||||
|
<div id="page_wrapper">
|
||||||
|
<CookieBanner />
|
||||||
|
<Header courseName={t("common:service-name")} />
|
||||||
|
<div className="govuk-width-container govuk-!-padding-bottom-9">
|
||||||
|
<Breadcrumbs />
|
||||||
|
|
||||||
|
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
|
||||||
|
<div className="govuk-grid-row ">
|
||||||
|
<div className="govuk-grid-column-two-thirds ">
|
||||||
|
<h1>There has been an error </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-grid-row">
|
||||||
|
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||||
|
{errorMessage}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-grid-row">
|
||||||
|
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||||
|
{" "}
|
||||||
|
<Link href="/">Return to Home</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Footer footerLinks={footerLinks} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getServerSideProps(context) {
|
||||||
|
const csrfToken = await getCsrfToken(context);
|
||||||
|
return {
|
||||||
|
props: { csrfToken },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Error;
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import useTranslation from "next-translate/useTranslation";
|
||||||
|
import Head from "next/head";
|
||||||
|
import Link from "next/link";
|
||||||
|
import CookieBanner from "../../components/cookieBanner";
|
||||||
|
import Footer from "../../components/footer";
|
||||||
|
import Header from "../../components/header";
|
||||||
|
import Breadcrumbs from "../../components/breadcrumbs";
|
||||||
|
import { getCsrfToken } from "next-auth/react";
|
||||||
|
|
||||||
|
const SignIn = (props) => {
|
||||||
|
let { t, lang } = useTranslation();
|
||||||
|
const { footerLinks, pages, csrfToken } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>Sign in - {t("common:service-name")}</title>
|
||||||
|
</Head>
|
||||||
|
<div id="page_wrapper">
|
||||||
|
<CookieBanner />
|
||||||
|
<Header courseName={t("common:service-name")} />
|
||||||
|
<div className="govuk-width-container govuk-!-padding-bottom-9">
|
||||||
|
<Breadcrumbs />
|
||||||
|
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
|
||||||
|
<div className="govuk-grid-row ">
|
||||||
|
<div className="govuk-grid-column-two-thirds ">
|
||||||
|
<h1>Sign in</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-grid-row">
|
||||||
|
<div className="govuk-grid-column-two-thirds ">
|
||||||
|
<form
|
||||||
|
method="post"
|
||||||
|
action="/api/auth/signin/email"
|
||||||
|
>
|
||||||
|
<div className="govuk-form-group">
|
||||||
|
<input
|
||||||
|
className="govuk-input"
|
||||||
|
name="csrfToken"
|
||||||
|
type="hidden"
|
||||||
|
defaultValue={csrfToken}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="govuk-label"
|
||||||
|
htmlFor="email"
|
||||||
|
>
|
||||||
|
Email address{" "}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="govuk-input govuk-!-width-three-quarters"
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-form-group">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="govuk-button"
|
||||||
|
>
|
||||||
|
Sign in with your email
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Footer footerLinks={footerLinks} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getServerSideProps(context) {
|
||||||
|
const csrfToken = await getCsrfToken(context);
|
||||||
|
return {
|
||||||
|
props: { csrfToken },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignIn;
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import useTranslation from "next-translate/useTranslation";
|
||||||
|
import Head from "next/head";
|
||||||
|
import Link from "next/link";
|
||||||
|
import CookieBanner from "../../components/cookieBanner";
|
||||||
|
import Footer from "../../components/footer";
|
||||||
|
import Header from "../../components/header";
|
||||||
|
import Breadcrumbs from "../../components/breadcrumbs";
|
||||||
|
|
||||||
|
import { getCsrfToken } from "next-auth/react";
|
||||||
|
|
||||||
|
const SignIn = (props) => {
|
||||||
|
let { t, lang } = useTranslation();
|
||||||
|
const { footerLinks, pages, csrfToken } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>Sign in - {t("common:service-name")}</title>
|
||||||
|
</Head>
|
||||||
|
<div id="page_wrapper">
|
||||||
|
<CookieBanner />
|
||||||
|
<Header courseName={t("common:service-name")} />
|
||||||
|
<div className="govuk-width-container govuk-!-padding-bottom-9">
|
||||||
|
<Breadcrumbs />
|
||||||
|
|
||||||
|
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
|
||||||
|
<div className="govuk-grid-row ">
|
||||||
|
<div className="govuk-grid-column-two-thirds ">
|
||||||
|
<h1>Check your email</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-grid-row">
|
||||||
|
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||||
|
A link has been sent to your email so you can
|
||||||
|
continue
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="govuk-grid-row">
|
||||||
|
<div className="govuk-grid-column-two-thirds govuk-body">
|
||||||
|
{" "}
|
||||||
|
<Link href="/">Return to Home</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Footer footerLinks={footerLinks} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getServerSideProps(context) {
|
||||||
|
const csrfToken = await getCsrfToken(context);
|
||||||
|
return {
|
||||||
|
props: { csrfToken },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignIn;
|
||||||
Reference in New Issue
Block a user