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

1 Like

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!

@mahmutkaya… Check this out… https://www.techiediaries.com/nestjs-upload-serve-static-file/

1 Like

Thanks man, I’m going to try it :+1:

1 Like

Let us know if that works!

Hello @cookiewanwan. Thanks for reading the article. Unfortunately, I was unable to reproduce this error from my own end. But not to worry, we will figure this out together. Did you cloned the app from GitHub or followed the tutorial from this article?

In any case, kindly run the following command and share your feedback:

1- npm cache clean --force
2- Delete node_modules with package-lock.json
3- npm install

Looking forward to hearing from you.

1 Like

@yemiwebby The github link you post at the top of the article is https://github.com/auth0-blog/nest-react-blog-ga - that repo is not consistent with this article from what I see.
For example the repo uses "auth0-js": "^9.8.2", which is never mentioned in the blog.

Am I missing anything? Please let me know.

Hello @shishir.biyyala, thanks for your comment. First, I hope you did not encounter any error while going through the tutorial and running the demo on GitHub? To answer your question, the repo uses “”@auth0/auth0-spa-js": “^1.6.0”. This was mentioned and installed in this section of the second part of the series.

Does this answer your question?