Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2

Learn how to build the frontend of a modern full-stack web app with React and TypeScript.

Brought to you by Olususi Oluyemi

Read on

3 Likes

This second part of the series on Building Modern Full-Stack Application with Nest.js, React, TypeScript and MongoDB focuses on building the front-end logic with React and TypeScript. This introduces a new and better way of structuring a React app as it uses TypeScript. What are your thoughts?

Hello,

thank you for the tutorial. It is nice and simple.
Yet, I am getting an error during login in.

 TypeError: auth0Client.loginWithRedirect is not a function
 loginWithRedirect
 src/auth/auth0Context.tsx:74

 71 | isLoading,  
 72 | isAuthenticated,  
 73 | user,> 
 74 | loginWithRedirect: (...p: any) => auth0Client.loginWithRedirect(...p),    
 >75 | getTokenSilently: (...p: any) => auth0Client.getTokenSilently(...p),  76 | getIdTokenClaims: (...p: any) => auth0Client.getIdTokenClaims(...p),  77 | logout: (...p: any) => auth0Client.logout(...p)

and

 newProps.onClick
 if (newProps.onClick) {
 70 |   const oldClick = newProps.onClick;
 71 |   newProps.onClick = (e: React.MouseEvent<PropType>) => {
> 72 |     oldClick(e);
 | ^  73 |     if (!e.defaultPrevented) {
  74 |       this.handleClick(e);
  75 |     }

could you help me solve the problem?

Let me ping the article author about that! Tagging him also here for better visibility: @yemiwebby

2 Likes

Thanks @konrad.sopala

Hello @fr.mastil. Thanks for reading the post. There are a few things that could cause this issue, I will like you to kindly double check your implementation and ensure that @auth0/auth0-spa-js library was installed and imported appropriately. Do let me know if this was helpful.

Routing was the issue which broke auth.

Anyway we got to another problem while following the article.
While getting the access_token using this code

const accessToken = await getIdTokenClaims();
  const response = await fetch(`${process.env.REACT_APP_SERVER_BASE_URL}/blog/post`, {
    headers: new Headers({
      "authorization": `Bearer ${accessToken.__raw}`
    }),
  });

There were all the time problems with an invalid audience, we were getting random string in the audience attribute when decoding with JWT tool: https://jwt.io/
after many hours of solving we found this issue on StackOverflow: https://stackoverflow.com/questions/53048732/auth0-with-reactjs-and-lumen-audience-looks-like-a-random-string

which describes differences between tokens.
And solving the problems calling getTokenSilently

    const token = await getTokenSilently()
    const response = await fetch(endpoint, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
1 Like

Thanks @fr.mastil. I am glad its that it’s now working for you. In the article, the auth0 was not initiated with the “audience” option as rightly pointed out in the link that you shared. I will consider this as an option and look into updating the article accordingly. Thanks again.

1 Like

Glad we were able to sort it out! Teamwork!

Hello

I’m now trying to play the sample app, but I get an error when I try ‘npm start’ on frontend. Here comes the error.

TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined
at validateString (internal/validators.js:112:11)
at Object.join (path.js:1039:7)
at noopServiceWorkerMiddleware (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:317:13)
at /Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:335:12)
at next (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:275:10)
at launchEditorMiddleware (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:317:13)
at /Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:335:12)
at next (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/index.js:275:10)
at handleWebpackInternalMiddleware (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (/Users/hisashiyamaguchi/nest-react-blog-ga/blog-frontend/node_modules/express/lib/router/layer.js:95:5)

My environment is below.

OS : Catalina 10.15.3
node : 12.15.0
npm : 6.13.4
nest : 6.14.2

Can you look at that @yemiwebby once you’re online?

Hi @yemiwebby,
First off all thanks for these great articles.
I’m a junior and I tried to add image upload feature for post but I couldn’t. I went with nestjs docs, stackoverflow, YouTube and several other articles but I couldn’t make it :sweat:.
It would be great if you could write the 3rd part for image uploading or at least recommend a source.

1 Like

Thanks for reading the article and the kind words. Yes I can do that or share a source with you. Will do that soon

2 Likes

Thanks for that @yemiwebby!