This client is made to work with the node-auth-server to perform the following operations:
- Allow user registration
- Demonstrate login using implicit flow
- Allow displaying a user list of available users in the auth server
- Demonstrate protected data fetching based on scopes defined in server.
- Limit user list view and edit components to admin users only
- Implement the logo component
- Implement the nav component
- Implement the user info component
- If user is logged in:
- Needs to display user first name (right now it hardcoded, fix this by using the Redux store to get the loggin in username)
- Display logout button
- If user is not logged in:
- Display login link --> should redirect to login component. Login component should have only a 'Login with Codaisseur' button.
- If user is logged in:
- Implement a user edit component
- Should allow admin to change user information
- Should show if account is locked (Implement account lock feature on server)
- Claims: a dictionary of key-value pairs, both of type string.
- Should allow admin to add claims to user
- Should allow admin to remove claims from user *cannot update
- Implement protected products links
- Implement products list component and only allow users with 'read:products' claim set to true to enter this component.
- Implement product create component and only allow users with 'edit:products' claim set to true to enter this component.
The following packages are used:
- Material UI
- OIDC - client
- React
- React-scripts
- React-dom
- React-router-dom
- React-router
- React-Redux
- Redux
- Redux-thunk
- Superagent
If u have not worked with MaterialUI before here are some usefull links to read up and see how certain things are used.
The link below is for an overal understanding of Material ui + a Github repository where u can find alot of examples:
- Clone the repository with
git clone https://github.com/Official-Codaisseur-Graduate/react-auth-server-admin.git - To make the app run you will need your ip address. To find your local ip address, do the following:
- Open “System Preferences” from the Apple menu.
- Click on “Network” Your IP address will be visible immediately next to “Status” with the next: “Wi-Fi is connected to Codaisseur and has the IP address 172.16.xx.xx".
- Copy the ip address as you will need it in the next steps.
- Go to the
authConst.jsfile located atsrc/utils/authConst.js - Change the ip addresses in the urls which are used for the properties redirectUri, silentRedirectUri and postLogoutRedirectUri to the ip address you copied earlier.
- Save
cdinto the cloned repository.npm installto install all the packages to make the repo work.npm run httpsto start up the server.
- On the default
/url you see a public page where everybody has acces to. - If u want to login u go to the
Menubutton and go toLogin.- if u dont have an account yet press the link that says
If you dont have an account yet, please press this link. - Here you can Sign up by giving the needed information.
- Press the
Sign upbutton and u will be redirected to the/loginuri.
- if u dont have an account yet press the link that says
- If u already have an account then press the
Login with Codaisseurbutton. - This button will redirect you to a popup screen where u have to consent the app to use certain information from your profile. This is a reaction from our node-auth-server that provide you with a token to have acces to certain information. (For more information about how the Acces procedure works read the Documentation in the node-auth-server repository)
- If you clicked on the
Yesbutton u will be redirected with the rightclaimsto a private page.