Quick screen change
Here is a simple code that i have developed. I was wandering how i can avoid the quick screen change. There is a login button that displays before the email is displayed. How can i avoid this ? (I did not find a solution within the documentation)
import { useState, useEffect } from "react";
import { supabase } from "~core/supabase"; // Ensure you import Supabase correctly
import "../style.css"
export default function IndexPopup() {
const [user, setUser] = useState(null);
useEffect(() => {
// Check user session with Supabase when the component mounts
const checkUserSession = async () => {
const { data: { session }, error } = await supabase.auth.getSession();
if (session) {
setUser(session.user);
} else {
console.error("No active session:", error?.message);
}
};
checkUserSession();
}, []);
// Function to navigate to options page
const navigateToOptions = () => {
// Open the options page of your extension
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
};
// Function to handle logout
const handleLogout = async () => {
const { error } = await supabase.auth.signOut();
if (!error) {
setUser(null);
} else {
console.error("Logout error:", error.message);
}
};
return (
<div className="...">
<h1 className="...">
Welcome to your Plasmo Extension!
</h1>
{!user ? (
<button
onClick={navigateToOptions}
className="...">
Log in / Sign up
</button>
) : (
<>
<div className="text-sm text-gray-700">
Logged in as:
</div>
<button
onClick={handleLogout}
className="...">
Log out
</button>
</>
)}
</div>
);
}
import { useState, useEffect } from "react";
import { supabase } from "~core/supabase"; // Ensure you import Supabase correctly
import "../style.css"
export default function IndexPopup() {
const [user, setUser] = useState(null);
useEffect(() => {
// Check user session with Supabase when the component mounts
const checkUserSession = async () => {
const { data: { session }, error } = await supabase.auth.getSession();
if (session) {
setUser(session.user);
} else {
console.error("No active session:", error?.message);
}
};
checkUserSession();
}, []);
// Function to navigate to options page
const navigateToOptions = () => {
// Open the options page of your extension
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
};
// Function to handle logout
const handleLogout = async () => {
const { error } = await supabase.auth.signOut();
if (!error) {
setUser(null);
} else {
console.error("Logout error:", error.message);
}
};
return (
<div className="...">
<h1 className="...">
Welcome to your Plasmo Extension!
</h1>
{!user ? (
<button
onClick={navigateToOptions}
className="...">
Log in / Sign up
</button>
) : (
<>
<div className="text-sm text-gray-700">
Logged in as:
</div>
<button
onClick={handleLogout}
className="...">
Log out
</button>
</>
)}
</div>
);
}
2 Replies
Does anyone have an idea ?
@Axel Schapmann has reached level 1. GG!