-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b34ed50
commit 7a52429
Showing
17 changed files
with
401 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { Link as RemixLink, useRouteLoaderData } from "@remix-run/react"; | ||
import { PiUserCircle, PiUserCircleFill } from "react-icons/pi"; | ||
import { User } from "~/types/User"; | ||
|
||
export function AuthButton() { | ||
const user = useRouteLoaderData<User|null>("root"); | ||
|
||
let authImage:JSX.Element = <PiUserCircle title={"Not logged in"} />; | ||
if (user) { | ||
if (user.avatar) { | ||
authImage = <img src={user.avatar} alt={user.displayName} className="rounded-circle" style={{"width": "1.75rem", "height": "1.75rem"}} /> | ||
} else { | ||
authImage = <PiUserCircleFill title={user.displayName} />; | ||
} | ||
} | ||
|
||
console.log('authbutton', JSON.stringify(user)); | ||
return ( | ||
<> | ||
<RemixLink className="d-none d-sm-inline text-dark" to="/auth/" style={{ "fontSize": "1.75rem" }}> | ||
{ authImage } | ||
</RemixLink> | ||
</> | ||
) | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { LoaderFunctionArgs } from "@remix-run/node"; | ||
import { Link as RemixLink, useLoaderData } from "@remix-run/react"; | ||
import { authenticator } from "~/services/auth.server"; | ||
import { cookieStorage } from "~/services/session.server"; | ||
|
||
export async function loader({ request }: LoaderFunctionArgs) { | ||
//console.log('in loader', (await cookieStorage.getSession(request.headers.get("Cookie"))).get("user")) | ||
const session = await cookieStorage.getSession(request.headers.get("Cookie")); | ||
const sessionUser = session.get("user"); | ||
const authUser = await authenticator.isAuthenticated(request); | ||
return { | ||
// | ||
user: sessionUser, | ||
sessionUser, | ||
authUser, | ||
session: (await cookieStorage.getSession(request.headers.get("Cookie"))) | ||
}; | ||
} | ||
|
||
function LoginSection() { | ||
return ( | ||
<> | ||
<p>You are not logged in!</p> | ||
<RemixLink className="btn btn-primary" to="login.html">Login</RemixLink> | ||
</> | ||
) | ||
} | ||
|
||
function LogoutSection({ user }: { user: any }) { | ||
return ( | ||
<> | ||
<p>You are logged in as <span className="border rounded bg-body-tertiary text-body-secondary p-2">{user.displayName} ({user.providerName}@{user.provider})</span></p> | ||
<p>Your email is <span className="border rounded bg-body-tertiary text-body-secondary p-2">{user.email}</span></p> | ||
<p>Your profile image is <img className="px-2" src={user.avatar} alt={user.displayName} style={{"height":"2em"}} /></p> | ||
<form action="/auth/logout.html" method="post"> | ||
<input type="submit" className="btn btn-primary" value="Logout" /> | ||
</form> | ||
</> | ||
) | ||
} | ||
|
||
export default function AuthIndex() { | ||
const data = useLoaderData<typeof loader>(); | ||
|
||
return ( | ||
<> | ||
<h1 className="py-2">Authentication</h1> | ||
{ data.user ? <LogoutSection user={data.user} /> : <LoginSection/> } | ||
<details className="pt-3"> | ||
<summary>Raw Auth User Data</summary> | ||
<pre>{JSON.stringify(data.user, null, 4)}</pre> | ||
</details> | ||
<details className=""> | ||
<summary>Raw Session User Data</summary> | ||
<pre>{JSON.stringify(data.user, null, 4)}</pre> | ||
</details> | ||
<details> | ||
<summary>Raw Session Data</summary> | ||
<pre>{JSON.stringify(data.session, null, 4)}</pre> | ||
</details> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { redirect, type LoaderFunctionArgs } from "@remix-run/node"; | ||
import { authenticator } from "~/services/auth.server"; | ||
import { cookieStorage } from "~/services/session.server"; | ||
|
||
export async function loader({ request }: LoaderFunctionArgs) { | ||
const user = await authenticator.authenticate("github", request); | ||
|
||
console.log('user in callback', JSON.stringify(user)); | ||
if (user != null) { | ||
const session = await cookieStorage.getSession(request.headers.get("Cookie")); | ||
session.set("user", user); | ||
return redirect('/auth/', { headers: { "Set-Cookie": await cookieStorage.commitSession(session) }}); | ||
} | ||
return redirect("/auth/"); | ||
|
||
/* | ||
return authenticator.authenticate("github", request, { | ||
successRedirect: "/auth/sucess.html", | ||
failureRedirect: "/auth/failure.html", | ||
}); | ||
*/ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import type { ActionFunctionArgs } from "@remix-run/node"; | ||
import { redirect } from "@remix-run/node"; | ||
import { authenticator } from "~/services/auth.server"; | ||
|
||
export async function loader() { | ||
return redirect("/auth/"); | ||
} | ||
|
||
export async function action({ request }: ActionFunctionArgs) { | ||
return authenticator.authenticate("github", request, { | ||
successRedirect: "/auth/", | ||
failureRedirect: "/auth/", | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { LoaderFunctionArgs } from "@remix-run/node"; | ||
import { Link as RemixLink, useLoaderData } from "@remix-run/react"; | ||
import { PiGithubLogoBold } from "react-icons/pi"; | ||
import { authenticator } from "~/services/auth.server"; | ||
|
||
export async function loader({ request }: LoaderFunctionArgs) { | ||
return await authenticator.isAuthenticated(request); | ||
} | ||
|
||
export default function AuthIndex() { | ||
const data = useLoaderData<typeof loader>(); | ||
|
||
return ( | ||
<> | ||
<h1 className="py-2">Login</h1> | ||
{ data ? <div className="alert alert-warning">It looks like you are already logged in! <RemixLink className="alert-link" to="/auth/">View my user info</RemixLink></div> : <></> } | ||
<form action="/auth/github" method="post"> | ||
<button type="submit" className="btn btn-primary">Login with Github</button> | ||
</form> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"; | ||
import { Link as RemixLink, useLoaderData } from "@remix-run/react"; | ||
import { cookieStorage } from "~/services/session.server"; | ||
import { authenticator } from "~/services/auth.server"; | ||
|
||
type AlertMessage = { | ||
alert: string; | ||
text: string; | ||
}; | ||
|
||
export async function loader({request}: LoaderFunctionArgs): Promise<AlertMessage | null> { | ||
const session = await cookieStorage.getSession(request.headers.get("Cookie")); | ||
|
||
const message = session.get("logout") as AlertMessage; | ||
|
||
console.log('logout message', JSON.stringify(message)); | ||
//return logout(request); logouts need to be POSTs | ||
return null; | ||
} | ||
|
||
export async function action({ request }: ActionFunctionArgs) { | ||
|
||
// don't pass request.headers.get("cookie") here | ||
let session = await cookieStorage.getSession(request.headers.get("Cookie")); | ||
|
||
const user = session.get("user"); | ||
session = await cookieStorage.getSession(); // create empty session for flash msg | ||
let message:AlertMessage; | ||
if (user) { | ||
message = { alert: "success", text: "You have been logged out" }; | ||
} else { | ||
message = { alert: "error", text: "You were not logged in"}; | ||
} | ||
session.flash("logout", message); | ||
|
||
await authenticator.logout(request, { | ||
redirectTo: "/auth/logout.html", | ||
headers: { "Set-Cookie": await cookieStorage.commitSession(session) }, | ||
}); | ||
} | ||
|
||
export default function AuthLogout() { | ||
const data = useLoaderData<typeof loader>(); | ||
|
||
const message = data || { alert: "info", text: "You are logged out!" }; | ||
|
||
return ( | ||
<> | ||
<h1 className="py-2">Logout</h1> | ||
<p>{message.text}</p> | ||
<p> | ||
<RemixLink className="btn btn-primary mx-2" to="/auth/">Login</RemixLink> | ||
<RemixLink className="btn btn-primary mx-2" to="/">Home</RemixLink> | ||
</p> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { createContext } from "react"; | ||
import { User } from "~/types/User"; | ||
|
||
|
||
export const AnonymousUser:User = { | ||
email: "", | ||
avatar: "", | ||
displayName: "Anonymous", | ||
provider: "anonymous", | ||
providerName: "anonymous", | ||
id: "anonymous:anonymous", | ||
isAnonymous: true, | ||
|
||
} | ||
|
||
const AuthContext = createContext<User>(AnonymousUser); | ||
|
||
export { AuthContext } |
Oops, something went wrong.