Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: implement dynamic redirect on auth #1240

Merged
merged 3 commits into from
Jun 6, 2023
Merged

feat: implement dynamic redirect on auth #1240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7468250
feat: allow dynamic redirect
OgDev-01 Jun 2, 2023
00ff2de
Merge branch 'beta' of https://github.com/open-sauced/insights into 1…
OgDev-01 Jun 2, 2023
ad79b47
feat: implement dynamic redirect on auth button click
OgDev-01 Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion components/molecules/AuthSection/auth-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import Link from "next/link";

import { IoNotifications } from "react-icons/io5";
Expand All @@ -26,11 +27,20 @@ import { authSession } from "lib/hooks/authSession";
import { Spinner } from "components/atoms/SpinLoader/spin-loader";

const AuthSection: React.FC = ({}) => {
const router = useRouter();
const currentPath = router.asPath;

const { signIn, signOut, user, sessionToken } = useSupabaseAuth();
const { onboarded } = useSession();
const [notifications, setNotifications] = useState<DbUserNotification[]>([]);
const [loading, setLoading] = useState(false);
const [userInfo, setUserInfo] = useState<DbUser | undefined>(undefined);
const [host, setHost] = useState<string>("");
useEffect(() => {
if (typeof window !== "undefined") {
setHost(window.location.origin as string);
}
}, []);
Comment on lines +38 to +43
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've done this in a few places now. This should be a reusable hook

Suggested change
const [host, setHost] = useState<string>("");
useEffect(() => {
if (typeof window !== "undefined") {
setHost(window.location.origin as string);
}
}, []);
const [host, setHost] = useState<string>("");
useEffect(() => {
if (typeof window !== "undefined") {
setHost(window.location.origin as string);
}
}, []);


// Fetch user notifications
const fetchNotifications = async () => {
Expand Down Expand Up @@ -158,7 +168,12 @@ const AuthSection: React.FC = ({}) => {
</DropdownList>
</>
) : (
<Button variant="primary" onClick={async () => await signIn({ provider: "github" })}>
<Button
variant="primary"
onClick={async () =>
await signIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
}
>
Connect with GitHub <Icon IconImage={GitHubIcon} className="ml-2" />
</Button>
)}
Expand Down
27 changes: 15 additions & 12 deletions lib/hooks/useSupabaseAuth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import { supabase } from "../utils/supabase";

const useSupabaseAuth = (loadSession = false) => {
const store = useStore();
const user = useStore(state => state.user);
const sessionToken = useStore(state => state.sessionToken);
const providerToken = useStore(state => state.providerToken);
const userId = useStore(state => state.userId);
const user = useStore((state) => state.user);
const sessionToken = useStore((state) => state.sessionToken);
const providerToken = useStore((state) => state.providerToken);
const userId = useStore((state) => state.userId);

useEffect(() => {
async function getUserSession() {
Expand All @@ -24,7 +24,9 @@ const useSupabaseAuth = (loadSession = false) => {
getUserSession();
}

const { data: { subscription: listener } } = supabase.auth.onAuthStateChange((_, session) => {
const {
data: { subscription: listener },
} = supabase.auth.onAuthStateChange((_, session) => {
store.setUser(session?.user ?? null);
store.setSessionToken(session?.access_token);
store.setProviderToken(session?.provider_token);
Expand All @@ -37,17 +39,18 @@ const useSupabaseAuth = (loadSession = false) => {
}, []);

return {
signIn: (data: SignInWithOAuthCredentials) => supabase.auth.signInWithOAuth({
...data,
options: {
redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/"
}
}),
signIn: (data: SignInWithOAuthCredentials) =>
supabase.auth.signInWithOAuth({
...data,
options: data.options ?? {
redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/",
},
}),
signOut: () => supabase.auth.signOut(),
user,
sessionToken,
providerToken,
userId
userId,
};
};

Expand Down