initial set up

.env.local

@@ -74,4 +74,14 @@ NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
 API_ROOT = "http://localhost:3000"
 
 
-GOOGLE_MAP_API_KEY = AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo
+GOOGLE_MAP_API_KEY = AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo
+
+
+EMAIL_SERVER_HOST=smtp.livemail.co.uk
+EMAIL_SERVER_PORT=465
+EMAIL_SERVER_USER=rob@rdbsolutions.co.uk
+EMAIL_SERVER_PASSWORD=R0b3rt72
+EMAIL_FROM=no-reply@example.com
+
+NEXT_PUBLIC_MAGIC_PK=pk_live_674E13244D1BB0A4
+MAGIC_SK=sk_live_F0E74A9557051A65

components/elements/index.js

@@ -92,7 +92,9 @@ export function Textfield(props) {
                         disabled
                     />
                 </div>
-                <div className="govuk-body">{t(hint)}</div>
+                <div className="govuk-body">
+                    {t("newappeal:new-appeal-introduction-paragraph")}
+                </div>
             </>
         );
     } else {
@@ -350,8 +352,10 @@ const RenderDatePicker = ({
                         onChange={onChange}
                         selected={value || null}
                         className="govuk-input govuk-input--width-10"
-                        minDate={minDate}
-                        maxDate={maxDate}
+                        {...(custom.dateStart !== false && {
+                            minDate: minDate,
+                        })}
+                        {...(custom.dateEnd !== false && { maxDate: maxDate })}
 
                         // value={!value ? null : new Date(value)}
                     />

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@googlemaps/react-wrapper": "^1.1.24",
+    "@magic-sdk/admin": "^1.4.0",
     "@webdeb/next-styles": "^1.1.1",
     "applicationinsights": "^2.2.0",
     "axios": "^0.24.0",
@@ -31,14 +32,17 @@
     "leaflet": "^1.7.1",
     "leaflet-defaulticon-compatibility": "^0.1.1",
     "lodash": "^4.17.21",
+    "magic-sdk": "^8.1.0",
     "moment": "^2.29.1",
     "multer": "^1.4.4",
     "nanoid": "^3.2.0",
     "next": "^12.0.8",
+    "next-auth": "^4.3.1",
     "next-connect": "^0.12.2",
     "next-redux-wrapper": "^7.0.5",
     "next-translate": "^1.2.0",
     "nextjs-basic-auth-middleware": "^0.2.1",
+    "nodemailer": "^6.7.3",
     "nookies": "^2.5.2",
     "ospoint": "^0.2.1",
     "path": "^0.12.7",

pages/_app.js

@@ -5,19 +5,25 @@ import { wrapper } from "../store/store";
 import { useStore, Provider } from "react-redux";
 import { persistStore } from "redux-persist";
 import { PersistGate } from "redux-persist/integration/react";
+import { SessionProvider as AuthProvider } from "next-auth/react";
 
-const MyApp = ({ Component, pageProps }) => {
+const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
     const store = useStore((state) => state);
     const persistor = persistStore(store, {}, function () {
         persistor.persist();
     });
 
     return (
-        <Provider store={store}>
-            <PersistGate persistor={store.__persistor} loading={<Loading />}>
-                <Component {...pageProps} />
-            </PersistGate>
-        </Provider>
+        <AuthProvider session={session}>
+            <Provider store={store}>
+                <PersistGate
+                    persistor={store.__persistor}
+                    loading={<Loading />}
+                >
+                    <Component {...pageProps} />
+                </PersistGate>
+            </Provider>
+        </AuthProvider>
     );
 };
 

pages/api/auth/[...nextauth].js

@@ -0,0 +1,33 @@
+import NextAuth from "next-auth";
+import Providers from "next-auth/providers";
+import { Magic } from "@magic-sdk/admin";
+
+const magic = new Magic(process.env.MAGIC_SK);
+
+export default NextAuth({
+    session: {
+        jwt: true,
+    },
+    pages: {
+        // override signIn page so we can integrate with Magic
+        signIn: "/auth/signin",
+    },
+    providers: [
+        Providers.Credentials({
+            name: "Magic Link",
+            credentials: {
+                didToken: { label: "DID Token", type: "text" },
+            },
+            async authorize({ didToken }, req) {
+                // validate magic DID token
+                magic.token.validate(didToken);
+
+                // fetch user metadata
+                const metadata = await magic.users.getMetadataByToken(didToken);
+
+                // return user info
+                return { ...metadata };
+            },
+        }),
+    ],
+});

pages/auth/signin.js

@@ -0,0 +1,36 @@
+import { useRouter } from "next/router";
+import { signIn } from "next-auth/client";
+
+// magic-sdk is only availabile in the browser
+const magic =
+    typeof window !== "undefined" &&
+    new Magic(process.env.NEXT_PUBLIC_MAGIC_PK || "a");
+
+export default function SignIn() {
+    const router = useRouter();
+    const { register, handleSubmit } = useForm();
+
+    const onSubmit = async ({ email }) => {
+        if (!magic) throw new Error(`magic not defined`);
+
+        // login with Magic
+        const didToken = await magic.auth.loginWithMagicLink({ email });
+
+        // sign in with NextAuth
+        await signIn("credentials", {
+            didToken,
+            callbackUrl: router.query["callbackUrl"],
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <input
+                {...register("email", { required: true })}
+                placeholder="nick@example.com"
+            />
+
+            <button type="submit">Sign in</button>
+        </form>
+    );
+}

pages/myportal/index.js

@@ -39,6 +39,8 @@ import {
 } from "../../store/watchedCases/action";
 import { setCookie } from "nookies";
 
+import { useSession, signIn, signOut } from "next-auth/react";
+
 const Home = (props) => {
     const {
         footerLinks,
@@ -56,6 +58,8 @@ const Home = (props) => {
     const { locale } = router;
     const { appealtypes } = router.query;
 
+    const { data: session } = useSession();
+
     return (
         <div>
             <Head>