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

Add JWT allow groups support in account settings #309

Merged
merged 4 commits into from
Dec 18, 2023
Merged

Add JWT allow groups support in account settings #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd35270
Added JWT allow groups support in account settings
bcmmbaga Dec 12, 2023
cd846d7
Update JWT access instructions in Settings
bcmmbaga Dec 12, 2023
7053ae6
Merge branch 'main' into jwt-group-based-auth
mlsmaycon Dec 12, 2023
89d3b65
fix empty array handle and update input text
mlsmaycon Dec 12, 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
2 changes: 2 additions & 0 deletions src/store/account/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface Account {
jwt_groups_enabled: boolean;
groups_propagation_enabled: boolean;
jwt_groups_claim_name: string;
jwt_allow_groups: string[];
extra: {
peer_approval_enabled: boolean;
}
Expand All @@ -19,6 +20,7 @@ export interface FormAccount extends Account {
jwt_groups_enabled: boolean;
groups_propagation_enabled: boolean;
jwt_groups_claim_name: string;
jwt_allow_groups: string[];
peer_login_expiration_formatted: ExpiresInValue;
peer_approval_enabled: boolean;
}
58 changes: 58 additions & 0 deletions src/views/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ export const Settings = () => {
const [groupsPropagationEnabled, setGroupsPropagationEnabled] =
useState(true);
const [jwtGroupsClaimName, setJwtGroupsClaimName] = useState("");
const [jwtAllowGroups, setJwtAllowGroups] = useState<string[]>([]);
const [displayJWTAllowGroups, setDisplayJWTAllowGroups] = useState(false);
const [confirmModal, confirmModalContextHolder] = Modal.useModal();
const { confirm } = Modal;

Expand Down Expand Up @@ -256,6 +258,7 @@ export const Settings = () => {
account.settings.peer_login_expiration_enabled,
jwt_groups_enabled: account.settings.jwt_groups_enabled,
jwt_groups_claim_name: account.settings.jwt_groups_claim_name,
jwt_allow_groups: account.settings.jwt_allow_groups? account.settings.jwt_allow_groups : [],
groups_propagation_enabled: account.settings.groups_propagation_enabled,
peer_approval_enabled: account.settings.extra ? account.settings.extra.peer_approval_enabled : false,
} as FormAccount;
Expand All @@ -265,6 +268,7 @@ export const Settings = () => {
setJwtGroupsEnabled(fAccount.jwt_groups_enabled);
setGroupsPropagationEnabled(fAccount.groups_propagation_enabled);
setJwtGroupsClaimName(fAccount.jwt_groups_claim_name);
setJwtAllowGroups(fAccount.jwt_allow_groups);
form.setFieldsValue(fAccount);
}, [accounts]);

Expand Down Expand Up @@ -430,6 +434,7 @@ export const Settings = () => {
jwt_groups_enabled: updatedAccount.data.settings.jwt_groups_enabled,
jwt_groups_claim_name:
updatedAccount.data.settings.jwt_groups_claim_name,
jwt_allow_groups: updatedAccount.data.settings.jwt_allow_groups,
groups_propagation_enabled:
updatedAccount.data.settings.groups_propagation_enabled,
peer_approval_enabled: updatedAccount.data.settings.extra? updatedAccount.data.settings.extra.peer_approval_enabled : false,
Expand Down Expand Up @@ -466,6 +471,7 @@ export const Settings = () => {
peer_login_expiration_enabled: formPeerExpirationEnabled,
jwt_groups_enabled: jwtGroupsEnabled,
jwt_groups_claim_name: jwtGroupsClaimName,
jwt_allow_groups: jwtAllowGroups,
groups_propagation_enabled: groupsPropagationEnabled,
peer_approval_enabled: formPeerApprovalEnabled,
});
Expand Down Expand Up @@ -495,6 +501,7 @@ export const Settings = () => {
peer_login_expiration_enabled: values.peer_login_expiration_enabled,
jwt_groups_enabled: jwtGroupsEnabled,
jwt_groups_claim_name: jwtGroupsClaimName,
jwt_allow_groups: jwtAllowGroups,
groups_propagation_enabled: groupsPropagationEnabled,
},
} as Account;
Expand Down Expand Up @@ -532,6 +539,7 @@ export const Settings = () => {

const saveAccount = (newValues: FormAccount) => {
let accountToSave = createAccountToSave(newValues);

dispatch(
accountActions.updateAccount.request({
getAccessTokenSilently: getTokenSilently,
Expand Down Expand Up @@ -875,6 +883,56 @@ export const Settings = () => {
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<label
style={{
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
}}
>
JWT allow group
</label>
<Paragraph
type={"secondary"}
style={{
marginTop: "-2",
fontWeight: "400",
marginBottom: "5px",
}}
>
Limit access to NetBird for the specified group name, e.g., NetBird users.
To use the group, first you need to configure it first in your IdP.
</Paragraph>
</Col>
</Row>
<Row>
<Col lg={6}>
<Form.Item name="jwt_allow_groups" style={displayJWTAllowGroups ? {marginBottom: "2px",} : {}}>
<Input
value={jwtAllowGroups[0]}
autoComplete="off"
onChange={(e) => {
setJwtAllowGroups([e.target.value]);
setDisplayJWTAllowGroups(true);
}}
/>
</Form.Item>
</Col>
</Row>
{ displayJWTAllowGroups && (
<Row>
<Paragraph style={{
marginTop: "-20",
fontWeight: "400",
marginBottom: "5px",
color: "red"
}}>
To prevent losing access, ensure you are part of this group.
</Paragraph>
</Row>
)}
</>
)}
</div>
Expand Down