generated from hackforla/.github-hackforla-base-repo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Okta login, profile working, needs TDM authorization
- Loading branch information
Showing
8 changed files
with
825 additions
and
224 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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,36 @@ | ||
import React, { useState, useEffect } from "react"; | ||
import { useOktaAuth } from "@okta/okta-react"; | ||
|
||
const LoginButton = () => { | ||
const { authState, oktaAuth } = useOktaAuth(); | ||
const [oktaUserInfo, setOktaUserInfo] = useState(null); | ||
|
||
useEffect(() => { | ||
if (!authState || !authState.isAuthenticated) { | ||
// When user isn't authenticated, forget any user info | ||
setOktaUserInfo(null); | ||
} else { | ||
oktaAuth.getUser().then(info => { | ||
setOktaUserInfo(info); | ||
}); | ||
} | ||
}, [authState, oktaAuth]); // Update if authState changes | ||
|
||
const handleLogin = async () => { | ||
await oktaAuth.signInWithRedirect(); | ||
}; | ||
|
||
const handleLogout = async () => { | ||
await oktaAuth.signOut(); | ||
}; | ||
|
||
if (!oktaUserInfo) | ||
return <button onClick={handleLogin}>Login / Register</button>; | ||
return ( | ||
<div> | ||
<button onClick={handleLogout}>Logout</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LoginButton; |
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,90 @@ | ||
import React, { useState, useEffect } from "react"; | ||
import { useOktaAuth } from "@okta/okta-react"; | ||
|
||
import { createUseStyles, useTheme } from "react-jss"; | ||
|
||
import ContentContainer from "../Layout/ContentContainer"; | ||
|
||
const useStyles = createUseStyles(theme => ({ | ||
content: { | ||
maxWidth: "1000px" | ||
}, | ||
heading: { | ||
color: theme.colorPrimary | ||
} | ||
})); | ||
|
||
const ProfilePage = () => { | ||
const theme = useTheme(); | ||
const classes = useStyles(theme); | ||
const { authState, oktaAuth } = useOktaAuth(); | ||
const [userInfo, setUserInfo] = useState(null); | ||
|
||
useEffect(() => { | ||
if (!authState || !authState.isAuthenticated) { | ||
// When user isn't authenticated, forget any user info | ||
setUserInfo(null); | ||
} else { | ||
setUserInfo(authState.idToken.claims); | ||
// get user information from `/userinfo` endpoint | ||
oktaAuth.getUser().then(info => { | ||
setUserInfo(info); | ||
}); | ||
} | ||
}, [authState, oktaAuth]); // Update if authState changes | ||
|
||
if (!userInfo) { | ||
return ( | ||
<div> | ||
<p>Fetching user profile...</p> | ||
</div> | ||
); | ||
} | ||
|
||
return ( | ||
<ContentContainer> | ||
<h1>Ojta User Profile (ID Token Claims) </h1> | ||
<div className={classes.content}> | ||
<p> | ||
Below is the information from your ID token which was obtained during | ||
the | ||
<a href="https://developer.okta.com/docs/guides/implement-auth-code-pkce"> | ||
PKCE Flow | ||
</a>{" "} | ||
and is now stored in local storage. | ||
</p> | ||
<p> | ||
This route is protected with the <code><SecureRoute></code>{" "} | ||
component, which will ensure that this page cannot be accessed until | ||
you have authenticated. | ||
</p> | ||
<h2>Auth</h2> | ||
<pre>{JSON.stringify(authState, null, 2)}</pre> | ||
<h2>Claims</h2> | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Claim</th> | ||
<th>Value</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{Object.entries(userInfo).map(claimEntry => { | ||
const claimName = claimEntry[0]; | ||
const claimValue = claimEntry[1]; | ||
const claimId = `claim-${claimName}`; | ||
return ( | ||
<tr key={claimName}> | ||
<td>{claimName}</td> | ||
<td id={claimId}>{claimValue.toString()}</td> | ||
</tr> | ||
); | ||
})} | ||
</tbody> | ||
</table> | ||
</div> | ||
</ContentContainer> | ||
); | ||
}; | ||
|
||
export default ProfilePage; |
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,23 @@ | ||
const OKTA_TESTING_DISABLEHTTPSCHECK = true; | ||
// process.env.OKTA_TESTING_DISABLEHTTPSCHECK || false; | ||
const REDIRECT_URI = `${window.location.origin}/login/callback`; | ||
|
||
// Dev Okta | ||
const ISSUER = "https://dev-50564150.okta.com/oauth2/default"; | ||
const CLIENT_ID = "0oaehwjjhx70xRh0O5d7"; | ||
|
||
// UAT Okta | ||
// const ISSUER = "https://lacitypublic.oktapreview.com/oauth2/default" | ||
// const CLIENT_ID = "0oabp5dgnwuGTqt5n1d7" | ||
|
||
// eslint-disable-next-line | ||
export default { | ||
oidc: { | ||
clientId: CLIENT_ID, | ||
issuer: ISSUER, | ||
redirectUri: REDIRECT_URI, | ||
scopes: ["openid", "profile", "email"], | ||
pkce: true, | ||
disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK | ||
} | ||
}; |