React web support for Auth0:

[crucialfelix]

Reference app:

https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/README.md

auth flow

1. A user authenticates (login or sign up) by being relocated to a page hosted by auth0
   • web: Clicking Login / Signup
   • apps: immediately relocated to Auth0 page
   • web: visiting any private route will relocate them to Auth0 page, they are returned to private route after authenticating
2. User signs up or logs in
3. User is relocated back to trillion trees web OR the react-native app using a registered custom url scheme (eg. trilliontrees://deep-link/url )

Using the AuthProvider from the reference app, we can then get user auth information in any functional component:

  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();

https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/src/components/NavBar.js https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/src/views/Profile.js

Current auth system

Almost all of the current routes and components for authentication will no longer be used. Keep them in place for now, they may be removed in a future PR.

routes

Defined in: web: app/components/App/TreeCounter.js native: app/components/Navigators/AppDrawerNavigator.js

• LoginContainer
• SignUpContainer
• ActivateAccountContainer
• EmailSentContainer
• ForgotPasswordContainer
• ResetPasswordContainer
• SuccessfullyActivatedAccount
• SignupSuccessPage (web only)

components

• app/components/Authentication
  • Login
  • ResetPassword
  • EmailSent
  • ActivateAccount
  • ForgotPassword
  • SignUp
  • SuccesfullyActivated

redux actions

• app/actions/authActions.js

  • login

  • logoutUser

  • forgot_password

  • sendEmail

  • reset_password

redux selectors

• app/selectors/index.js
  • currentUserProfileSelector
  • currentUserProfileIdSelector

Changes and Additions

• [x] Add example Auth0 settings to config/index.dist.js We don't keep the client secret in git of course.

• [x] Copy AuthProvider See: https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/src/react-auth0-spa.js

This is wrapped around the main app and allows any functional component to access userProfile with:

  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();

• [x] New route: /auth0-callback This is where Auth0 relocates the user to with user profile as an encrypted GET param. TODO: I'm not yet sure if need to do anything other than relocate them to home.

• [x] New route: /authorize Relocate user immediately to https://accounts.plant-for-the-planet.org/authorize (hosted on auth0)

Auth0 may need to relocate a user to our domain just so we can relocate them back to auth0. This is for security reasons to prove that we are in control of the domain that will store cookies.

• [x] New route: /logout After calling

  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();
  logout();

  the user is redirected to Auth0.com then back to /logout (this route). Just relocate them to / I guess

• [x] PrivateRoute Change to use this version: https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login/src/components/PrivateRoute.js

current versions are located: web: app/components/App/TreeCounter.js native: app/components/Navigators/AppDrawerNavigator.js

[sagararyal]

I've added https://accounts.plant-for-the-planet.org as a custom domain in Auth0,

This means instead of calling https://planetapp.eu.auth0.com/

you can call https://accounts.plant-for-the-planet.org

[crucialfelix]

btw. that custom domain you added just relocates to https://plant-for-the-planet.org It is Auth0 doing the relocating so maybe its a configuration issue that I can't find.

[sagararyal]

@crucialfelix

https://planetapp.eu.auth0.com/ redirects to auth0 so https://plant-for-the-planet.org redirects to our home; but

calling api with https://accounts.plant-for-the-planet.org

like: https://planetapp.eu.auth0.com/api/v2/ should be fine.