Rect-Redux MERN app running concurrently via a proxy

[DopamineDriven]

I am rebuilding a database and website for a Chicago-based news company as a freelance developer. I am currently using create react app (CRA) as opposed to a custom webpack environment since the former supports running the application concurrently via a proxy (two separate package.json files). The latter, unfortunately, is only supported via the use of experimental react and react-dom packages. That said, I have several questions pertaining to configuring Auth0 for this app. First, since CRA is a SPA, would I use the single page web application type (for react) or the traditional web application type (for node) since API calls originate in back-end node controllers? I am using axios (or could use fetch) to connect the two in an API.jsx file in utils on the client side. Since there is a limit to three photos to be included for new users, I have consolidated controllers->routes->server in one image as follows:

Controllers communicate with mongoose schemas (models); the controllers are passed to routes which are then passed through the server. Since the app is running concurrently, the server ApiPORT=3030 whereas the AppPORT=3000 (default CRA PORT)

Client-Side and Server-Side are linked via a proxy in the client-side package.json
{
“name”: “client”,
“version”: “0.1.0”,
“private”: true,
“proxy”: “https://localhost:3030”,
“engines”: {
“npm”: “6.14.4”,
“node”: “12.16.2”
},
“dependencies”: {
“@auth0/auth0-spa-js”: “^1.8.0”,
…

Currently, I have the following Auth0 configuration code in client/src (root of the react-app)

As you may have noticed in the server, I do have a MongoDB Atlas cluster I would like to use to store user information. I was wondering how exactly the data flow is executed in this regard? I have used a custom JWT method in another MERN app that were embedded in server-generated cookies via cookie-parser npm. It had four separate flags explicitly set for security. I want to use Auth0 for this business because it is the most bulletproof method and provides peace of mind. I am also wondering if I should use an Auth0 context provider if already using a react-redux store, and if so if this would be the correct approach for incorporating the Auth0 provider in the root?

One remaining question pertaining to the use of auth0_config.json files that are .gitignored; why not use a .env approach utilizing the dotenv npm (as I do on the server side in node)? Just noticed most SPA examples use a json file instead and was wondering why?

That all said, before proceeding further I thought it best to ask if what I’m doing is considered good practice and for any input, critiques, recommendations, etc…

Thank you!

-Andrew

[dan.woda]

Hi @DopamineDriven,

Welcome to the Community!

Thanks for sharing the project, there is quite a bit to unpack here. With this much code, it might be helpful to have a repo to look at if you are looking for feedback.

Hope I can help

[DopamineDriven]

Hey @dan.woda,

Sure, I am actually having another issue now. I have moved forward using the @auth0/auth0-spa-js package, configured an API here on Auth0, and have had success signing in with the universal OAuth google login (2 users recorded as doing so). However, I have callback url not working as it errors after that. Then, when I try to sign in again after restarting it keeps throws a “loginWithRedirect not defined” error. It is a private repo but I’m more than happy to give you access by adding you to the repo as a collaborator or sending you a zip if that works? Or i can even make it public briefly when you take a look, any of the above work.

Thanks!

-Andrew

[DopamineDriven]

This might be a bit more informative than the comment I posted last evening. I am essentially having a problem getting the app to loginWithRedirect.

I have a callback url defined in the dashboard as well

[dan.woda]

This is going to depend on how you configured the loginWithRedirect() function. As you can see in our react quickstart, we configure the function to call our auth0 sdk initialization, auth0Client, with the .loginWithPopup method.

  const loginWithPopup = async (params = {}) => {
    setPopupOpen(true);
    try {
      await auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      setPopupOpen(false);
    }
    const user = await auth0Client.getUser();
    setUser(user);
    setIsAuthenticated(true);
  };

@DopamineDriven

It is a private repo but I’m more than happy to give you access by adding you to the repo as a collaborator or sending you a zip if that works?

Either one is fine if you are comfortable sharing it! Here is my GitHub: https://github.com/IdentityDan

[DopamineDriven]

@dan.woda, thanks! I added you as a collaborator. I will try using the loginWithPopup call instead of the loginWithRedirectCallback

[DopamineDriven]

update: I had login working consistently after making the ReduxProvider a child of the Auth0Provider in the root (had it reversed previously) but it would redirect me to login again on a hard refresh. So, I set up domain-specific OAuth client-id and client-secret via the google developer console for the app. The tenant I’m using is dev-3cqt2bq0 and the app name is ckt. I was still logged in locally after adding values to their corresponding keys in connections/social in the dashboard. When I tested it before logging out it would reload each time on refresh and keep me logged in. After clearing site data via application of dev tools, however, I got the following 500 internal server error

That said, when testing the connection from the connection/social/google page of the app dashboard, it loads the user info successfully.

Any idea on how to go about resolving this? Should I add the tenant-specific login URI and the tenant-specific callback URL that I provided to google in the app settings?