initial set up

2022-04-07 16:16:30 +01:00
parent 1fae028486
commit 412b7c15b6
7 changed files with 107 additions and 10 deletions
@@ -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>
    );
 };

@@ -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 };
+            },
+        }),
+    ],
+});
@@ -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>
+    );
+}
@@ -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>