auto login / anon login

This commit is contained in:
austinkelsay 2024-02-11 00:36:25 -06:00
parent 1f9d76d783
commit 9287c9bd49
5 changed files with 70 additions and 3 deletions
src

11
src/components/Layout.js Normal file

@ -0,0 +1,11 @@
import React from 'react';
import { useAutoLogin } from '@/hooks/useAutoLogin';
const Layout = ({ children }) => {
useAutoLogin();
console.log('Layout');
return <>{children}</>;
};
export default Layout;

39
src/hooks/useAutoLogin.js Normal file

@ -0,0 +1,39 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import axios from 'axios';
import { setPubkey, setUsername } from "@/redux/reducers/userReducer";
export const useAutoLogin = () => {
const dispatch = useDispatch();
const router = useRouter();
console.log('useAutoLogin');
useEffect(() => {
const publicKey = window.localStorage.getItem('pubkey');
console.log('Auto logging in with public key:', publicKey);
if (publicKey) {
const login = async () => {
try {
const response = await axios.get(`/api/users/${publicKey}`);
if (response.status === 200 && response.data) {
dispatch(setPubkey(publicKey));
if (response.data.username) {
dispatch(setUsername(response.data.username));
}
} else {
// Handle user not found or other errors appropriately
}
} catch (error) {
console.error('Error during auto login:', error);
// Handle error
}
};
login();
}
}, [dispatch]);
return null;
};

@ -3,6 +3,7 @@ import { Provider } from "react-redux";
import { store } from "@/redux/store"; import { store } from "@/redux/store";
import Navbar from '@/components/navbar/Navbar'; import Navbar from '@/components/navbar/Navbar';
import { ToastProvider } from '@/hooks/useToast'; import { ToastProvider } from '@/hooks/useToast';
import Layout from '@/components/layout';
import '@/styles/globals.css' import '@/styles/globals.css'
import 'primereact/resources/themes/lara-dark-indigo/theme.css'; import 'primereact/resources/themes/lara-dark-indigo/theme.css';
@ -13,8 +14,10 @@ export default function MyApp({
<Provider store={store}> <Provider store={store}>
<PrimeReactProvider> <PrimeReactProvider>
<ToastProvider> <ToastProvider>
<Navbar /> <Layout>
<Component {...pageProps} /> <Navbar />
<Component {...pageProps} />
</Layout>
</ToastProvider> </ToastProvider>
</PrimeReactProvider> </PrimeReactProvider>
</Provider> </Provider>

@ -9,7 +9,6 @@ export default async function handler(req, res) {
try { try {
let user; let user;
if (isPubkey) { if (isPubkey) {
console.log('is pub', slug);
// If slug is a pubkey // If slug is a pubkey
user = await getUserByPubkey(slug); user = await getUserByPubkey(slug);
} else { } else {

@ -5,6 +5,7 @@ import { useRouter } from "next/router";
import { Button } from 'primereact/button'; import { Button } from 'primereact/button';
import { useToast } from "@/hooks/useToast"; import { useToast } from "@/hooks/useToast";
import { useNostr } from "@/hooks/useNostr"; import { useNostr } from "@/hooks/useNostr";
import { generateSecretKey, getPublicKey } from 'nostr-tools'
import { findKind0Username } from "@/utils/nostr"; import { findKind0Username } from "@/utils/nostr";
import { setPubkey, setUsername } from "@/redux/reducers/userReducer"; import { setPubkey, setUsername } from "@/redux/reducers/userReducer";
@ -12,6 +13,7 @@ const Login = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const router = useRouter(); const router = useRouter();
const { showToast } = useToast(); const { showToast } = useToast();
const { fetchKind0 } = useNostr();
const nostrLogin = async () => { const nostrLogin = async () => {
try { try {
@ -28,6 +30,7 @@ const Login = () => {
const response = await axios.get(`/api/users/${publicKey}`); const response = await axios.get(`/api/users/${publicKey}`);
if (response.status === 200 && response.data) { if (response.status === 200 && response.data) {
dispatch(setPubkey(publicKey)); dispatch(setPubkey(publicKey));
window.localStorage.setItem('pubkey', publicKey);
if (response.data.username) { if (response.data.username) {
dispatch(setUsername(response.data.username)); dispatch(setUsername(response.data.username));
} }
@ -47,6 +50,7 @@ const Login = () => {
const createUserResponse = await axios.post(`/api/users`, payload); const createUserResponse = await axios.post(`/api/users`, payload);
if (createUserResponse.status === 201) { if (createUserResponse.status === 201) {
dispatch(setPubkey(publicKey)); dispatch(setPubkey(publicKey));
window.localStorage.setItem('pubkey', publicKey);
if (username) { if (username) {
dispatch(setUsername(username)); dispatch(setUsername(username));
} }
@ -60,6 +64,16 @@ const Login = () => {
} }
}; };
const anonymousLogin = async () => {
const secretKey = generateSecretKey();
const publicKey = getPublicKey(secretKey);
dispatch(setPubkey(publicKey));
window.localStorage.setItem('pubkey', publicKey);
window.localStorage.setItem('seckey', secretKey);
router.push('/');
};
return ( return (
<div className="w-fit mx-auto mt-24 flex flex-col justify-center"> <div className="w-fit mx-auto mt-24 flex flex-col justify-center">
<h1 className="text-center mb-8">Login</h1> <h1 className="text-center mb-8">Login</h1>
@ -75,6 +89,7 @@ const Login = () => {
icon="pi pi-user" icon="pi pi-user"
className="text-[#f8f8ff] w-[250px] my-4" className="text-[#f8f8ff] w-[250px] my-4"
rounded rounded
onClick={anonymousLogin}
/> />
</div> </div>
) )