by12380 / react-universal Goto Github PK

Remove automatically renew token and auto login prompts when visit LogIn page.
Move auto renew token feature to when login button is clicked

Stores a copy of user profile to app server database every after user successfully signs in.

Currently all the basic auth functions (Login, Logout, etc..) exist in service/authService.js and are not in the form of redux actions. Need to update them as redux actions + reducers.

The current React Expo has not implemented Redux.

Tasks:

• Need to set up basic redux folder structures
• Link components to redux

Store session items (accessTokens, etc.) locally when logged in.
Load session items locally on app start up to redux store.

Tasks:

• Create todo CRUD server api
• Create todo UI and redux action/reducer

Tasks:

• Create appropriate folder structure
• Link react components to redux

Follow redux folder structure from https://github.com/Pau1fitz/react-spotify

In electron production build, traditional react routing fails (and thus shows empty page) due to possibility of running in non-browser environment.

Reference the following react-electron open source project for a viable solution.
https://github.com/jschr/electron-react-redux-boilerplate/blob/master/app/renderer/app.js
https://github.com/chentsulin/electron-react-boilerplate/blob/master/app/containers/Root.js

Remove legacy code (non-redux codes) from Mobile project

Currently the login button will directly log user in with the first account that the user has used to log in on the first time (despite having logout and login again). Will need to create a separate button that allows switching account.

Details:

• Create a 'Switch account' button placed in the Profile page.
• Create redux action and reducer for 'switch account' functionality. (Copy and reuse the login action creators in its respective project and simply append prompt=login as a parameter in the login settings/options.

Completed the above feature for:

• React Web
• Electron
• Expo

Story:

• After user successfully logs in, user will be directed to Profile page showing user's name and picture.

Tasks:

• Create get user profile actions and reducers
• Display user profile from store onto Profile page

Story:

• After user is logged in and redirected to Profile page, there is a button for logout

Tasks:

• Add actions and reducer for logout

Bootstrap web react project using create-react-app

In both the Expo and Electron project, when the login button is clicked the second time during a slight delay before the first login prompt pops-up from the first click, it triggers and shows two login prompt in the end. (Expo app explicitly gives warning)

Potential fix:

Perhaps disable the login button right after the first click and enable button again after the login prompt exits (whether the user successfully logs in or quits login prompt).

Or

A loading overlay page that prevents user from clicking any buttons while the login proccess is in progress.

Suggesstion: Use loginPending redux state to enable and disable the loading feature.

Fixed issue for:

• Electron
• Expo

Story:

• When user starts app, a login prompt is show first if not previously logged in.
• Upon succesful login, user is redirect to a profile page (the main page) with minimal user info (name, profile pic, etc..) displayed
• User can logout

Tasks:

• auto login is run upon app/component start up
• Retrieve access token from stored session to exchange for auth0 profile info
• Create a profile page to display user profile info
• Create a simple button for logout

Currently in development mode Redux dev tool has not been set up for the Electron project so there is not way of inspecting redux states for the app during development. Some googling is needed to see how to setup this up.

It is preferred to have a npm/yarn script at the repo's root directory (/react-universal) that can be run where it automatically runs the yarn command for all three client projects (React, Electron, Expo) under each of their root directory.

Suggestions:

• Create a new package.json file at the project's root directory (/react-universal)
• Call the script's command name something like install

When logged in using facebook account, the profile picture returned by facebook and displayed on the Profile page appears low quality and need to be resized accordingly.

Check to see if there is a way to detect dimensions of the returned image link and dynamically resize the image when displayed at the Profile page, suitable for all future cases when different social logins are used.

Fixed the above issue for:

• React Web
• Electron
• Expo

Story:

• Everytime user logs in on the client side, user's profile will be saved/updated in the database.

Tasks:

• Set up mongo/mongoose
• auth0 packages if necessary
• Create backend api (/auth/login) that takes client side used_id to get auth0 user profile on the server side and store to database.

User story:

• When user attempts to access the main page (profile page), user will be redirected to login page if not logged in
• After user logs in the user will be redirected to the main page.

Technical flow:

• When user attempts to access Profile page, user will be redirected to LogIn page, which will first perform an auth0 checkSession to attempt a token renewal.
  Refer to guide: https://auth0.com/docs/quickstart/spa/react/05-token-renewal

• If checkSession fails to renew token, user will be redirected to login page for a manual login.

Tasks:

1. Create Profile, Login, and Callback pages and setup routing
2. Implement manual login and expect to obtain access tokens upon success.
3. Implement checkSession for token renewals
4. Add route guards

Change profile/update-with-auth0 endpoint to a more generic user/update accepting a full user object to store in database, instead of fetching user profile from a specific auth provider.

This allows the our app to be overall more generic and not tied to auth0.

In Expo project, after user clicks 'switch account' and successfully re-logsin using another account, profile page does not display an updated profile info.

Add login using refresh token for expo project

When fetching profile data from auth0, user email is missing. (For all 3 client-side project)

Fix:

In login redux action, add email to the scopes array.

Ex.
Change const scopes = ['offline_access', 'openid', 'profile'];
To const scopes = ['offline_access', 'openid', 'profile', 'email'];

Issue fixed for:

• Electron
• React Web
• Expo