Add NIP-07 login

src/pages/Login.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { setPrivateKey } from "../state/Login";
+import { setPrivateKey, setPublicKey } from "../state/Login";
 import * as secp from '@noble/secp256k1';
 import { bech32 } from "bech32";
 import { useNavigate } from "react-router-dom";
@@ -8,21 +8,21 @@ import { useNavigate } from "react-router-dom";
 export default function LoginPage() {
     const dispatch = useDispatch();
     const navigate = useNavigate();
-    const privateKey = useSelector(s => s.login.privateKey);
+    const publicKey = useSelector(s => s.login.publicKey);
     const [key, setKey] = useState("");
 
     function doLogin() {
-        if(key.startsWith("nsec")) {
+        if (key.startsWith("nsec")) {
             let nKey = bech32.decode(key);
             let buff = bech32.fromWords(nKey.words);
             let hexKey = secp.utils.bytesToHex(Uint8Array.from(buff));
-            if(secp.utils.isValidPrivateKey(hexKey)) {
+            if (secp.utils.isValidPrivateKey(hexKey)) {
                 dispatch(setPrivateKey(hexKey));
             } else {
                 throw "INVALID PRIVATE KEY";
             }
         } else {
-            if(secp.utils.isValidPrivateKey(key)) {
+            if (secp.utils.isValidPrivateKey(key)) {
                 dispatch(setPrivateKey(key));
             } else {
                 throw "INVALID PRIVATE KEY";
@@ -30,20 +30,43 @@ export default function LoginPage() {
         }
     }
 
+    async function doNip07Login() {
+        let pubKey = await window.nostr.getPublicKey();
+        dispatch(setPublicKey(pubKey));
+    }
+
+    function altLogins() {
+        let nip07 = 'nostr' in window;
+
+        if (!nip07) {
+            return null;
+        }
+
+        return (
+            <>
+                <h2>Other Login Methods</h2>
+                <div className="flex">
+                    <div className="btn" onClick={(e) => doNip07Login()}>Login with Extension (NIP-07)</div>
+                </div>
+            </>
+        )
+    }
+
     useEffect(() => {
-        if(privateKey) {
+        if (publicKey) {
             navigate("/");
         }
-    }, [privateKey]);
+    }, [publicKey]);
+
     return (
         <>
             <h1>Login</h1>
             <p>Enter your private key:</p>
             <div className="flex">
-                <input type="text" placeholder="Private key" className="f-grow" onChange={e => setKey(e.target.value)}/>
+                <input type="text" placeholder="Private key" className="f-grow" onChange={e => setKey(e.target.value)} />
                 <div className="btn" onClick={(e) => doLogin()}>Login</div>
             </div>
-            
+            {altLogins()}
         </>
     );
 }

src/state/Login.js

@@ -44,6 +44,9 @@ const LoginSlice = createSlice({
             window.localStorage.setItem(PrivateKeyItem, action.payload);
             state.publicKey = secp.utils.bytesToHex(secp.schnorr.getPublicKey(action.payload, true));
         },
+        setPublicKey: (state, action) => {
+            state.publicKey = action.payload;
+        },
         setRelays: (state, action) => {
             state.relays = action.payload;
         },
@@ -57,5 +60,5 @@ const LoginSlice = createSlice({
     }
 });
 
-export const { init, setPrivateKey, setRelays, setFollows, logout } = LoginSlice.actions;
+export const { init, setPrivateKey, setPublicKey, setRelays, setFollows, logout } = LoginSlice.actions;
 export const reducer = LoginSlice.reducer;