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.

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

Auth logout #1492

Merged
merged 89 commits into from
Feb 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
89 commits
Select commit Hold shift + click to select a range
edbe336
WG309 Auth Context and Welcome screen - WIP
AlinaGoaga Feb 7, 2022
b5de9f0
WG309 Auth Context and Welcome screen - WIP2
AlinaGoaga Feb 8, 2022
6c95293
WG309 Auth Context and Welcome screen - WIP
AlinaGoaga Feb 7, 2022
6eeef0c
Add sign_in handler
yiannistri Feb 9, 2022
5c301b8
WG309 Update welcome screen form
AlinaGoaga Feb 9, 2022
14d4105
Fix conflicts with main
AlinaGoaga Feb 9, 2022
cad18cc
WG309 Update sign in formData submit
AlinaGoaga Feb 9, 2022
5baeaa2
WG309 Update sign in req and payload
AlinaGoaga Feb 9, 2022
10cae92
Fix format in helm testdata
AlinaGoaga Feb 9, 2022
c0494a0
Enable CORS for dev
yiannistri Feb 9, 2022
0f1bea6
Remove unnecessary package
AlinaGoaga Feb 10, 2022
daef222
WG309 Userinfo draft and cleanup
AlinaGoaga Feb 11, 2022
5e7b8af
Callback working - use REACT_API_URL=http://0.0.0.0:9001
AlinaGoaga Feb 11, 2022
4bbedce
WG309 User info returns 200
AlinaGoaga Feb 14, 2022
3c8cfc5
WG309 Remove CORS related code
AlinaGoaga Feb 14, 2022
c43f2e9
WG309 Remove CORS related code - update
AlinaGoaga Feb 15, 2022
498dd4e
Add tests for Signin handler
yiannistri Feb 15, 2022
84c3ebd
Update tests
yiannistri Feb 16, 2022
3abeefc
Remove username from sign in form
AlinaGoaga Feb 16, 2022
1f3dc68
Add token signer/verifier
yiannistri Feb 16, 2022
60b330d
Fix test
yiannistri Feb 16, 2022
789f6ce
Add new middleware
yiannistri Feb 16, 2022
0373ec0
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth
AlinaGoaga Feb 16, 2022
1fb78e0
Add tests for Signin handler
yiannistri Feb 15, 2022
c551050
Update with origin
AlinaGoaga Feb 17, 2022
59ccedc
User from stash
AlinaGoaga Feb 17, 2022
2336d9e
Merge branch 'main' of github.com:weaveworks/weave-gitops into auth
AlinaGoaga Feb 17, 2022
1d19784
WG309 AuthContext update on user info check
AlinaGoaga Feb 17, 2022
49a7ab4
WG309 AuthContext update on user info check - 2
AlinaGoaga Feb 17, 2022
e837a77
WG309 Refactor loading in AuthContext
AlinaGoaga Feb 17, 2022
ae040a2
WG309 AuthContext reruns on history change
AlinaGoaga Feb 18, 2022
3847233
Fix conflict
AlinaGoaga Feb 18, 2022
fe81bfc
WG309 AuthContext refactor
AlinaGoaga Feb 18, 2022
f07f4c9
WG309 On refresh page doesnt go to 404 anymore
AlinaGoaga Feb 18, 2022
6ac4094
Wrap loading page
AlinaGoaga Feb 20, 2022
e806261
WG309 Fix oidc return url
AlinaGoaga Feb 20, 2022
e986429
Issued cookies should have the Secure attribute to true
yiannistri Feb 20, 2022
e30bbf1
WG309 Display alert error
AlinaGoaga Feb 21, 2022
20cdf1d
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth
AlinaGoaga Feb 21, 2022
4473d2e
Remove secret yaml example
AlinaGoaga Feb 21, 2022
029aecb
WG309 Improve loading transition
AlinaGoaga Feb 21, 2022
d998e1d
Add OIDC flow test for user info endpoint
yiannistri Feb 21, 2022
89bb47e
WG309 Improve loading transition - 2
AlinaGoaga Feb 21, 2022
c87bc33
Fix eslint errors
AlinaGoaga Feb 21, 2022
5519fd1
Split out authchecking from the authcontext, single router
foot Feb 21, 2022
47db6c9
WG309 Add switch for password visibility
AlinaGoaga Feb 21, 2022
4315c22
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth
AlinaGoaga Feb 21, 2022
8eb9919
WG309 Add switch for password visibility - updated
AlinaGoaga Feb 21, 2022
bb3790d
Add BE logout code
AlinaGoaga Feb 21, 2022
490a0b5
Update package.json with main version
AlinaGoaga Feb 21, 2022
000e115
Lint it
foot Feb 21, 2022
9241e8f
WG407 Add user settings section - WIP
AlinaGoaga Feb 21, 2022
0682742
Rm security risk printing user-supplied value
foot Feb 22, 2022
430ba54
Merge remote-tracking branch 'origin/main' into auth
foot Feb 22, 2022
eba9828
WG407 Add user settings section - WIP2
AlinaGoaga Feb 22, 2022
cd4abbc
WG309 Hide UI behind flag - WIP
AlinaGoaga Feb 22, 2022
20e9bfd
Fix conflicts with main
AlinaGoaga Feb 22, 2022
316b2f7
Merge remote-tracking branch 'origin/main' into auth
foot Feb 22, 2022
7b16987
Update with origin
AlinaGoaga Feb 22, 2022
3002c85
Fix conflicts with auth
AlinaGoaga Feb 22, 2022
4e90793
Push first pass at GET /v1/config
foot Feb 22, 2022
286211b
https in tests
foot Feb 22, 2022
ef05352
Revert "https in tests"
foot Feb 22, 2022
8e53187
get feature flags innit
foot Feb 22, 2022
7d5565b
WG309 Hide UI behind feature flag - updated
AlinaGoaga Feb 22, 2022
c5b3bec
Linting and testing
foot Feb 22, 2022
a3aac3c
Update exports
AlinaGoaga Feb 22, 2022
7b5fb52
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth
AlinaGoaga Feb 22, 2022
43f3148
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth-l…
AlinaGoaga Feb 22, 2022
2be3506
untagglin
foot Feb 22, 2022
c3f4e7b
fix fix fix
foot Feb 22, 2022
a2244a5
OIDC is optional now
foot Feb 23, 2022
043c557
Update package.lock
AlinaGoaga Feb 23, 2022
3e136b7
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth-l…
AlinaGoaga Feb 23, 2022
706d57a
WG407 Hide userSettings when authFlag is null
AlinaGoaga Feb 23, 2022
ade7c0c
WG309 Hide UI behind feature flag - updated2
AlinaGoaga Feb 23, 2022
69d3bbe
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth-l…
AlinaGoaga Feb 23, 2022
ce6a493
WG407 Hide userSettings when authFlag is null - 2
AlinaGoaga Feb 23, 2022
f20fdec
Fix issues in package-lock.json
AlinaGoaga Feb 23, 2022
770f468
Fix issues in package-lock.json - 2
AlinaGoaga Feb 23, 2022
ae13acf
Merge branch 'auth' of github.com:weaveworks/weave-gitops into auth-l…
AlinaGoaga Feb 23, 2022
6ad5e4f
Solve conflicts with main
AlinaGoaga Feb 23, 2022
193a6e1
WG407 Add FeatureFlags context
AlinaGoaga Feb 23, 2022
12b526c
WG407 Add FeatureFlags context - updated
AlinaGoaga Feb 23, 2022
ed6a0aa
WG407 Add FeatureFlags context - updated2
AlinaGoaga Feb 23, 2022
099cde8
Fix linting error
AlinaGoaga Feb 23, 2022
61b1114
Update ui/contexts/AuthContext.tsx
AlinaGoaga Feb 23, 2022
e1c5f2c
Implement PR feedback
AlinaGoaga Feb 23, 2022
41a7732
Implement PR feedback - 2
AlinaGoaga Feb 23, 2022
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
27 changes: 3 additions & 24 deletions ui/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ErrorBoundary from "./components/ErrorBoundary";
import Layout from "./components/Layout";
import AppContextProvider from "./contexts/AppContext";
import AuthContextProvider, { AuthCheck } from "./contexts/AuthContext";
import FeatureFlagsContextProvider from "./contexts/FeatureFlags";
import {
Applications as appsClient,
GitProvider,
Expand Down Expand Up @@ -86,33 +87,13 @@ const App = () => (
);

export default function AppContainer() {
const [authFlag, setAuthFlag] = React.useState<boolean>(null);

const getAuthFlag = React.useCallback(() => {
fetch("/v1/featureflags")
.then((response) => response.json())
.then((data) =>
setAuthFlag(data.flags.WEAVE_GITOPS_AUTH_ENABLED === "true")
)
.catch((err) => console.log(err));
}, []);

React.useEffect(() => {
getAuthFlag();
}, [getAuthFlag]);

// Loading...
if (authFlag === null) {
return null;
}

return (
<MuiThemeProvider theme={muiTheme}>
<ThemeProvider theme={theme}>
<Fonts />
<GlobalStyle />
<Router>
{authFlag ? (
<FeatureFlagsContextProvider>
<AuthContextProvider>
<Switch>
{/* <Signin> does not use the base page <Layout> so pull it up here */}
Expand All @@ -125,9 +106,7 @@ export default function AppContainer() {
</Route>
</Switch>
</AuthContextProvider>
) : (
<App />
)}
</FeatureFlagsContextProvider>
</Router>
</ThemeProvider>
</MuiThemeProvider>
Expand Down
5 changes: 5 additions & 0 deletions ui/components/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import SaveAltIcon from "@material-ui/icons/SaveAlt";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
import LogoutIcon from "@material-ui/icons/ExitToApp";
import * as React from "react";
import styled from "styled-components";
import { colors, spacing } from "../typedefs/styled";
Expand All @@ -34,6 +35,7 @@ export enum IconType {
SkipNextIcon,
SkipPreviousIcon,
RemoveCircleIcon,
LogoutIcon,
}

type Props = {
Expand Down Expand Up @@ -91,6 +93,9 @@ function getIcon(i: IconType) {
case IconType.RemoveCircleIcon:
return RemoveCircleIcon;

case IconType.LogoutIcon:
return LogoutIcon;

default:
break;
}
Expand Down
10 changes: 4 additions & 6 deletions ui/components/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import styled from "styled-components";
import useNavigation from "../hooks/navigation";
import { PageRoute } from "../lib/types";
import { formatURL, getNavValue } from "../lib/utils";
import { FeatureFlags } from "../contexts/FeatureFlags";
import Flex from "./Flex";
import Link from "./Link";
import Logo from "./Logo";
import UserSettings from "./UserSettings";

type Props = {
className?: string;
Expand Down Expand Up @@ -94,20 +96,16 @@ const TopToolBar = styled(Flex)`
}
`;

//style for account icon - disabled while no account functionality exists
// const UserAvatar = styled(Icon)`
// padding-right: ${(props) => props.theme.spacing.medium};
// `;

function Layout({ className, children }: Props) {
const { authFlag } = React.useContext(FeatureFlags);
const { currentPage } = useNavigation();

return (
<div className={className}>
<AppContainer>
<TopToolBar between align>
<Logo />
{/* code for account icon - disabled while no account functionality exists <UserAvatar size="xl" type={IconType.Account} color="white" /> */}
{authFlag ? <UserSettings /> : null}
</TopToolBar>
<Main wide>
<NavContainer>
Expand Down
68 changes: 68 additions & 0 deletions ui/components/UserSettings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import {
IconButton,
ListItemIcon,
Menu,
MenuItem,
Tooltip,
} from "@material-ui/core";
import * as React from "react";
import styled from "styled-components";
import { Auth } from "../contexts/AuthContext";
import Icon, { IconType } from "./Icon";

const UserAvatar = styled(Icon)`
padding-right: ${(props) => props.theme.spacing.medium};
`;

const SettingsMenu = styled(Menu)`
.MuiListItemIcon-root {
min-width: 25px;
color: ${(props) => props.theme.colors.black};
}
`;

function UserSettings() {
const [anchorEl, setAnchorEl] = React.useState(null);
const { userInfo, logOut } = React.useContext(Auth);

const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};

return (
<>
<Tooltip title="Account settings">
<IconButton
onClick={handleClick}
aria-controls={open ? "account-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
>
<UserAvatar size="xl" type={IconType.Account} color="white" />
</IconButton>
</Tooltip>
<SettingsMenu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
>
<MenuItem>Hello, {userInfo?.email}</MenuItem>
<MenuItem onClick={() => logOut()}>
<ListItemIcon>
<Icon type={IconType.LogoutIcon} size="base" />
</ListItemIcon>
Logout
</MenuItem>
</SettingsMenu>
</>
);
}

export default styled(UserSettings)``;
65 changes: 51 additions & 14 deletions ui/contexts/AuthContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,21 @@ import * as React from "react";
import { useHistory, Redirect } from "react-router-dom";
import Layout from "../components/Layout";
import LoadingPage from "../components/LoadingPage";
import { FeatureFlags } from "../contexts/FeatureFlags";

const USER_INFO = "/oauth2/userinfo";
const SIGN_IN = "/oauth2/sign_in";
const LOG_OUT = "/oauth2/logout";
const AUTH_PATH_SIGNIN = "/sign_in";

export const AuthCheck = ({ children }) => {
// If the auth flag is null go straight to rendering the children
const { authFlag } = React.useContext(FeatureFlags);

if (!authFlag) {
return children;
}

const { loading, userInfo } = React.useContext(Auth);

// Wait until userInfo is loaded before showing signin or app content
Expand Down Expand Up @@ -36,15 +45,18 @@ export type AuthContext = {
};
error: { status: number; statusText: string };
loading: boolean;
logOut: () => void;
};

export const Auth = React.createContext<AuthContext | null>(null);

export default function AuthContextProvider({ children }) {
const [userInfo, setUserInfo] = React.useState<{
email: string;
groups: string[];
}>(null);
const { authFlag } = React.useContext(FeatureFlags);
const [userInfo, setUserInfo] =
React.useState<{
email: string;
groups: string[];
}>(null);
const [loading, setLoading] = React.useState<boolean>(true);
const [error, setError] = React.useState(null);
const history = useHistory();
Expand Down Expand Up @@ -80,21 +92,46 @@ export default function AuthContextProvider({ children }) {
.finally(() => setLoading(false));
}, []);

const logOut = React.useCallback(() => {
setLoading(true);
fetch(LOG_OUT, {
method: "POST",
})
.then((response) => {
if (response.status !== 200) {
setError(response);
return;
}
history.push("/sign_in");
})
.finally(() => setLoading(false));
}, []);

React.useEffect(() => {
if (!authFlag) {
return null;
}
getUserInfo();
return history.listen(getUserInfo);
}, [getUserInfo, history]);

return (
<Auth.Provider
value={{
signIn,
userInfo,
error,
loading,
}}
>
{children}
</Auth.Provider>
<>
{authFlag ? (
<Auth.Provider
value={{
signIn,
userInfo,
error,
loading,
logOut,
}}
>
{children}
</Auth.Provider>
) : (
children
)}
</>
);
}
40 changes: 40 additions & 0 deletions ui/contexts/FeatureFlags.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import * as React from "react";

export type FeatureFlagsContext = {
authFlag: boolean | null;
};

export const FeatureFlags =
React.createContext<FeatureFlagsContext | null>(null);

export default function FeatureFlagsContextProvider({ children }) {
const [authFlag, setAuthFlag] = React.useState<boolean>(null);

const getAuthFlag = React.useCallback(() => {
fetch("/v1/featureflags")
.then((response) => response.json())
.then((data) =>
setAuthFlag(data.flags.WEAVE_GITOPS_AUTH_ENABLED === "true")
)
.catch((err) => console.log(err));
}, []);

React.useEffect(() => {
getAuthFlag();
}, [getAuthFlag]);

// Loading...
if (authFlag === null) {
return null;
}

return (
<FeatureFlags.Provider
value={{
authFlag,
}}
>
{children}
</FeatureFlags.Provider>
);
}
7 changes: 7 additions & 0 deletions ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ import Footer from "./components/Footer";
import GithubDeviceAuthModal from "./components/GithubDeviceAuthModal";
import LoadingPage from "./components/LoadingPage";
import RepoInputWithAuth from "./components/RepoInputWithAuth";
import UserSettings from "./components/UserSettings";
import Icon, { IconType } from "./components/Icon";
import AppContextProvider from "./contexts/AppContext";
import AuthContextProvider from "./contexts/AuthContext";
import FeatureFlagsContextProvider, {
FeatureFlags,
} from "./contexts/FeatureFlags";
import CallbackStateContextProvider from "./contexts/CallbackStateContext";
import useApplications from "./hooks/applications";
import { Applications as applicationsClient } from "./lib/api/applications/applications.pb";
Expand All @@ -21,6 +25,8 @@ import Applications from "./pages/Applications";
import OAuthCallback from "./pages/OAuthCallback";

export {
FeatureFlagsContextProvider,
FeatureFlags,
AuthContextProvider,
AppContextProvider,
ApplicationAdd,
Expand All @@ -42,4 +48,5 @@ export {
Button,
Icon,
IconType,
UserSettings,
};