Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

How can I do auth operations (login/register) in Metronic UI React template?


How can I do auth operations (login/register) in Metronic UI React template?
I'm new to Metronic UI so I don't know much about the file structure of the project, so I don't know how to do auth operations (login/register). Can you help me with this?
It would be great if you could suggest a video or a resource.
Note: I wrote the sign up and login process in C#.
Good work.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


Register ve login işleminin bir kısmını yaptım gibi fakat bir sorunum var giriş yaptıktan sonra istediğim route'a gidemiyorum bunu nasıl yapabilirim



Hi,

We don't have such documentation, but actually, the Auth module is separated and you have to dive only into two/three sub-folders and files to start working with it: demo1/src/app/modules/auth.
1) All API methods are placed here: demo1/src/app/modules/auth/core/_requests.ts
2) All models are described here: demo1/src/app/modules/auth/core/_models.ts
3) Provider (if you don't have extra logic, no need to touch it): demo1/src/app/modules/auth/core/Auth.tsx
4) Pages folder (login/registration components): demo1/src/app/modules/auth/components.

Regards,
Keenthemes support



Hello, I seem to have done some of the register and login process, but I have a problem, I can't go to the route I want after logging in, how can I do this?



Hi,

Try to check src/app/modules/auth/core/Auth.tsx file.
Rows 71-76 (if your API works fine, you have to request user data by token). After the user fulfilled, you can check routing logic demo1/src/app/routing/AppRoutes.tsx.

Regards,
Keenthemes support



I looked at the demo of the template, I looked at the network steps during login, when the login button is triggered, it sends APIURL/verify_token request.
Since there is no such request in my api, it returns 404. I guess that's why my backend login doesn't seem to work, but the backend works fine.
What kind of logic should I use in verify_token? I want to get rid of this problem as soon as possible.
Thank you.



1) Your login API method should return AuthModel which includes api_token (code>src/app/modules/auth/core/_requests.ts).

2) We store this token in the localStorage.

3) After login/page refresh, we are sending request to the ${API_URL}/verify_token API method with BEARER token header in the request (also all other requets includes this header | src/app/modules/auth/core/AuthHelpers.ts - row 50).
This is how you can authorize users.

4) ${API_URL}/verify_token API method should return the user itself (with id/name/email and etc, see UserModel</code in src/app/modules/auth/core/_models.ts file).


Regards,
Keenthemes support



I have successfully logged in, but when I refresh the page (when I press the F5 key), it throws me from the dashboard page to the auth page, and when I look at the localstorage section, my token information is there.
How can I solve this problem?



I have successfully logged in, but when I refresh the page (press the F5 key), it takes me from the dashboard page to the auth page and when I look at the localstorage section, my token information is there.
Update: When I refresh the page (press F5) it deletes the kt-auth-react-v i.e. token information. How can I prevent it from deleting this token information?
How can I solve this problem?



Try to add debuggerbetween rows 72 and 73 in the file src/app/modules/auth/core/Auth.tsx and check what is going on in the code. This is exactly the place where we are initializing user before the render the application (including routing).

Regards,
Keenthemes support


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(