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

bachi.degli-innocent · January 29, 2020, 3:52pm

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

Brought to you by Olususi Oluyemi

yemiwebby · January 29, 2020, 7:55pm

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?

fr.mastil · February 2, 2020, 2:25pm

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?

konrad.sopala · February 3, 2020, 8:48am

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

yemiwebby · February 4, 2020, 7:55pm

Thanks @konrad.sopala

yemiwebby · February 4, 2020, 8:07pm

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.

fr.mastil · February 4, 2020, 10:53pm

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: Auth0 with ReactJS and Lumen - Audience looks like a random string - Stack Overflow

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

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

yemiwebby · February 5, 2020, 6:13am

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.

konrad.sopala · February 5, 2020, 2:35pm

Glad we were able to sort it out! Teamwork!

cookiewanwan · March 5, 2020, 5:58am

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

konrad.sopala · March 5, 2020, 8:40am

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

mahmutkaya · March 12, 2020, 6:44pm

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 .
It would be great if you could write the 3rd part for image uploading or at least recommend a source.

yemiwebby · March 12, 2020, 7:04pm

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

konrad.sopala · March 13, 2020, 9:57am

Thanks for that @yemiwebby!

yemiwebby · April 25, 2020, 11:08pm

@mahmutkaya… Check this out… Nest.js Tutorial: File Uploading with Multer and Serving Static Files in Nest | Techiediaries

mahmutkaya · April 26, 2020, 12:09am

Thanks man, I’m going to try it

konrad.sopala · April 27, 2020, 8:59am

Let us know if that works!

yemiwebby · May 6, 2020, 6:19pm

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.

shishir.biyyala · May 28, 2020, 4:37am

@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.

yemiwebby · May 28, 2020, 5:03am

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?