src/components/Footer/Footer.tsx

@@ -121,7 +121,7 @@ export const Footer = () =>
       </Container>
       <div className={`${styles.borderTop} ${styles.credits}`}>
         Built by&nbsp;
-        <a href="https://nostrdev.com/" target="_blank">
+        <a rel="noopener" href="https://nostrdev.com/" target="_blank">
           Nostr Dev
         </a>{' '}
         2024.

src/pages/nostr/index.tsx

@@ -1,3 +1,5 @@
+import { launch as launchNostrLoginDialog } from 'nostr-login'
+
 import { Button, Divider, TextField } from '@mui/material'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { useEffect, useState } from 'react'
@@ -424,6 +426,32 @@ export const Nostr = () => {
           </Divider>
         </>
       )}
+      <label className={styles.label} htmlFor="extension-login">
+        Login by using a{' '}
+        <a
+          rel="noopener"
+          href="https://github.com/nostrband/nostr-login"
+          target="_blank"
+        >
+          nostr-login
+        </a>
+      </label>
+      <Button
+        id="nostr-login"
+        variant="contained"
+        onClick={() => {
+          launchNostrLoginDialog('welcome')
+        }}
+      >
+        Nostr Login
+      </Button>
+      <Divider
+        sx={{
+          fontSize: '16px'
+        }}
+      >
+        or
+      </Divider>
       <TextField
         onKeyDown={handleInputKeyDown}
         label="nip05 login / nip46 bunker string"

src/store/actionTypes.ts

@@ -4,6 +4,7 @@ export const USER_LOGOUT = 'USER_LOGOUT'
 
 export const SET_AUTH_STATE = 'SET_AUTH_STATE'
 export const UPDATE_LOGIN_METHOD = 'UPDATE_LOGIN_METHOD'
+export const UPDATE_NOSTR_LOGIN_AUTH_METHOD = 'UPDATE_NOSTR_LOGIN_AUTH_METHOD'
 export const UPDATE_KEYPAIR = 'UPDATE_KEYPAIR'
 export const UPDATE_NSECBUNKER_PUBKEY = 'UPDATE_NSECBUNKER_PUBKEY'
 export const UPDATE_NSECBUNKER_RELAYS = 'UPDATE_NSECBUNKER_RELAYS'

src/store/auth/action.ts

@@ -7,7 +7,9 @@ import {
   UpdateKeyPair,
   UpdateLoginMethod,
   UpdateNsecBunkerPubkey,
-  UpdateNsecBunkerRelays
+  UpdateNsecBunkerRelays,
+  NostrLoginAuthMethod,
+  UpdateNostrLoginAuthMethod
 } from './types'
 
 export const setAuthState = (payload: AuthState): SetAuthState => ({
@@ -22,6 +24,13 @@ export const updateLoginMethod = (
   payload
 })
 
+export const updateNostrLoginAuthMethod = (
+  payload: NostrLoginAuthMethod | undefined
+): UpdateNostrLoginAuthMethod => ({
+  type: ActionTypes.UPDATE_NOSTR_LOGIN_AUTH_METHOD,
+  payload
+})
+
 export const updateKeyPair = (payload: Keys | undefined): UpdateKeyPair => ({
   type: ActionTypes.UPDATE_KEYPAIR,
   payload

src/store/auth/reducer.ts

@@ -30,6 +30,15 @@ const reducer = (
       }
     }
 
+    case ActionTypes.UPDATE_NOSTR_LOGIN_AUTH_METHOD: {
+      const { payload } = action
+
+      return {
+        ...state,
+        nostrLoginAuthMethod: payload
+      }
+    }
+
     case ActionTypes.UPDATE_KEYPAIR: {
       const { payload } = action
 

src/store/auth/types.ts

@@ -1,6 +1,14 @@
 import * as ActionTypes from '../actionTypes'
 import { RestoreState, UserLogout } from '../actions'
 
+export enum NostrLoginAuthMethod {
+  Connect = 'connect',
+  ReadOnly = 'readOnly',
+  Extension = 'extension',
+  Local = 'local',
+  OTP = 'otp'
+}
+
 export enum LoginMethods {
   extension = 'extension',
   privateKey = 'privateKey',
@@ -17,6 +25,7 @@ export interface AuthState {
   loggedIn: boolean
   usersPubkey?: string
   loginMethod?: LoginMethods
+  nostrLoginAuthMethod?: NostrLoginAuthMethod
   keyPair?: Keys
   nsecBunkerPubkey?: string
   nsecBunkerRelays?: string[]
@@ -32,6 +41,11 @@ export interface UpdateLoginMethod {
   payload: LoginMethods | undefined
 }
 
+export interface UpdateNostrLoginAuthMethod {
+  type: typeof ActionTypes.UPDATE_NOSTR_LOGIN_AUTH_METHOD
+  payload: NostrLoginAuthMethod | undefined
+}
+
 export interface UpdateKeyPair {
   type: typeof ActionTypes.UPDATE_KEYPAIR
   payload: Keys | undefined
@@ -51,6 +65,7 @@ export type AuthDispatchTypes =
   | RestoreState
   | SetAuthState
   | UpdateLoginMethod
+  | UpdateNostrLoginAuthMethod
   | UpdateKeyPair
   | UpdateNsecBunkerPubkey
   | UpdateNsecBunkerRelays

src/store/metadata/reducer.ts

@@ -2,7 +2,15 @@ import * as ActionTypes from '../actionTypes'
 import { MetadataDispatchTypes } from './types'
 import { Event } from 'nostr-tools'
 
-const initialState: Event | null = null
+const initialState: Event = {
+  content: '',
+  created_at: 0,
+  id: '',
+  kind: 0,
+  pubkey: '',
+  sig: '',
+  tags: []
+}
 
 const reducer = (
   state = initialState,

src/utils/nostr.ts

@@ -426,6 +426,8 @@ export const getUsersAppData = async (): Promise<UserAppData | null> => {
 
   // Handle case where the encrypted content is an empty object
   if (encryptedContent === '{}') {
+    // Generate ephemeral key pair
+    // https://docs.sigit.io/#/technical?id=storing-app-data
     const secret = generateSecretKey()
     const pubKey = getPublicKey(secret)