custom next auth pages
This commit is contained in:
@@ -1,8 +1,84 @@
|
||||
import NextAuth from "next-auth";
|
||||
import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter";
|
||||
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
|
||||
// https://next-auth.js.org/configuration/options
|
||||
export default NextAuth({
|
||||
@@ -19,19 +95,35 @@ export default NextAuth({
|
||||
},
|
||||
from: process.env.EMAIL_FROM,
|
||||
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({
|
||||
type: "mysql",
|
||||
database:
|
||||
"mysql://nextAuthAdmin:!Sky9fish1972@77.68.17.157:3306/nextauthDB?synchronise=true",
|
||||
synchronize: false,
|
||||
}),
|
||||
secret: "SuperSecret",
|
||||
adapter: PrismaAdapter(prisma),
|
||||
session: {
|
||||
jwt: true,
|
||||
pages: {},
|
||||
theme: "dark",
|
||||
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