feat: export nsec

src/components/ModForm.tsx

@@ -185,7 +185,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
 
     let hexPubkey: string
 
-    if (userState.isAuth && userState.user?.pubkey) {
+    if (userState.auth && userState.user?.pubkey) {
       hexPubkey = userState.user.pubkey as string
     } else {
       hexPubkey = (await window.nostr?.getPublicKey()) as string

src/layout/header.tsx

@@ -11,7 +11,7 @@ import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
 import { MetadataController, ZapController } from '../controllers'
 import { useAppDispatch, useAppSelector } from '../hooks'
 import { appRoutes } from '../routes'
-import { setIsAuth, setUser } from '../store/reducers/user'
+import { setAuth, setUser } from '../store/reducers/user'
 import mainStyles from '../styles//main.module.scss'
 import navStyles from '../styles/nav.module.scss'
 import '../styles/popup.css'
@@ -29,10 +29,15 @@ export const Header = () => {
       noBanner: true,
       onAuth: (npub, opts) => {
         if (opts.type === 'logout') {
-          dispatch(setIsAuth(false))
+          dispatch(setAuth(null))
           dispatch(setUser(null))
         } else {
-          dispatch(setIsAuth(true))
+          dispatch(
+            setAuth({
+              method: opts.method,
+              localNsec: opts.localNsec
+            })
+          )
           dispatch(
             setUser({
               npub,
@@ -128,7 +133,7 @@ export const Header = () => {
                   </svg>
                   Settings
                 </Link>
-                {!userState.isAuth && (
+                {!userState.auth && (
                   <a
                     id='loginNav'
                     className={navStyles.NMTI_SecInside_Link}
@@ -141,7 +146,7 @@ export const Header = () => {
                     Login
                   </a>
                 )}
-                {userState.isAuth && userState.user && (
+                {userState.auth && userState.user && (
                   <div className={navStyles.NMTI_SecInside_Link}>
                     {userState.user.image && (
                       <img
@@ -231,7 +236,7 @@ const TipButtonWithDialog = React.memo(() => {
       setIsLoading(true)
       setLoadingSpinnerDesc('Getting user pubkey')
 
-      if (userState.isAuth && userState.user?.pubkey) {
+      if (userState.auth && userState.user?.pubkey) {
         userHexKey = userState.user.pubkey as string
       } else {
         userHexKey = (await window.nostr?.getPublicKey()) as string

src/pages/innerMod.tsx

@@ -230,7 +230,7 @@ const Game = ({ game, author }: GameProps) => {
           </svg>
         </button>
         <div className={`dropdown-menu dropdown-menu-end dropdownMainMenu`}>
-          {userState.isAuth && userState.user?.pubkey === author && (
+          {userState.auth && userState.user?.pubkey === author && (
             <a
               className='dropdown-item dropdownMainMenuItem'
               onClick={() =>
@@ -1110,7 +1110,7 @@ const ZapMod = ({ modDetails }: ZapModProps) => {
       setIsLoading(true)
       setLoadingSpinnerDesc('Getting user pubkey')
 
-      if (userState.isAuth && userState.user?.pubkey) {
+      if (userState.auth && userState.user?.pubkey) {
         userHexKey = userState.user.pubkey as string
       } else {
         userHexKey = (await window.nostr?.getPublicKey()) as string
@@ -1275,7 +1275,7 @@ const ZapSite = () => {
       setIsLoading(true)
       setLoadingSpinnerDesc('Getting user pubkey')
 
-      if (userState.isAuth && userState.user?.pubkey) {
+      if (userState.auth && userState.user?.pubkey) {
         userHexKey = userState.user.pubkey as string
       } else {
         userHexKey = (await window.nostr?.getPublicKey()) as string

src/pages/settings.tsx

@@ -1,8 +1,11 @@
 import { logout } from 'nostr-login'
 import { Link, useLocation } from 'react-router-dom'
+import { toast } from 'react-toastify'
 import { InputField } from '../components/Inputs'
 import { ProfileSection } from '../components/ProfileSection'
+import { useAppSelector } from '../hooks'
 import { appRoutes } from '../routes'
+import { AuthMethod } from '../store/reducers/user'
 import '../styles/feed.css'
 import '../styles/innerPage.css'
 import '../styles/popup.css'
@@ -10,7 +13,7 @@ import '../styles/profile.css'
 import '../styles/settings.css'
 import '../styles/styles.css'
 import '../styles/write.css'
-import { useAppSelector } from '../hooks'
+import { copyTextToClipboard } from '../utils'
 
 export const SettingsPage = () => {
   const location = useLocation()
@@ -135,7 +138,52 @@ const SettingTabs = () => {
             Admin
           </Link>
         </div>
-        {userState.isAuth && (
+
+        {userState.auth &&
+          userState.auth.method === AuthMethod.Local &&
+          userState.auth.localNsec && (
+            <div className='inputLabelWrapperMain'>
+              <label className='form-label labelMain'>Your Private Key</label>
+              <p className='labelDescriptionMain'>
+                NOTICE: Make sure you save your private key (nsec) somewhere
+                safe.
+              </p>
+              <div className='inputWrapperMain'>
+                <input
+                  type='password'
+                  className='inputMain inputMainWithBtn'
+                  value={userState.auth.localNsec}
+                />
+                <button
+                  className='btn btnMain btnMainInsideField'
+                  type='button'
+                  onClick={() => {
+                    copyTextToClipboard(
+                      userState.auth?.localNsec as string
+                    ).then((isCopied) => {
+                      if (isCopied) toast.success('Nsec copied to clipboard!')
+                    })
+                  }}
+                >
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 512 512'
+                    width='1em'
+                    height='1em'
+                    fill='currentColor'
+                  >
+                    <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
+                  </svg>
+                </button>
+              </div>
+              <p className='labelDescriptionMain'>
+                WARNING: Do not sign-out without saving your nsec somewhere
+                safe. Otherwise, you'll lose access to your "account".
+              </p>
+            </div>
+          )}
+
+        {userState.auth && (
           <button className='btn btnMain' type='button' onClick={handleSignOut}>
             Sign out
           </button>

src/store/reducers/user.ts

@@ -1,13 +1,25 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { UserProfile } from '../../types/user'
 
+export enum AuthMethod {
+  Connect = 'connect',
+  ReadOnly = 'readOnly',
+  Extension = 'extension',
+  Local = 'local',
+  OTP = 'otp'
+}
+export interface IUserAuth {
+  method: AuthMethod
+  localNsec?: string
+}
+
 export interface IUserState {
-  isAuth: boolean
+  auth: IUserAuth | null
   user: UserProfile
 }
 
 const initialState: IUserState = {
-  isAuth: false,
+  auth: null,
   user: {}
 }
 
@@ -15,8 +27,8 @@ export const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
-    setIsAuth(state, action: PayloadAction<boolean>) {
-      state = { ...state, isAuth: action.payload }
+    setAuth(state, action: PayloadAction<IUserAuth | null>) {
+      state = { ...state, auth: action.payload }
       return state
     },
     setUser(state, action: PayloadAction<UserProfile>) {
@@ -26,6 +38,6 @@ export const userSlice = createSlice({
   }
 })
 
-export const { setIsAuth, setUser } = userSlice.actions
+export const { setAuth, setUser } = userSlice.actions
 
 export default userSlice.reducer