Learn how to build the frontend of a modern full-stack web app with React and TypeScript.
Brought to you by Olususi Oluyemi
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: 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}`
}
})
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
2 Likes
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 
.
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ā¦ Nest.js Tutorial: File Uploading with Multer and Serving Static Files in Nest | Techiediaries
1 Like
Thanks man, Iām going to try it 
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?