So I'm pretty new to development, it's been like a month and a half since I started learning. So right now I'm stuck, I've got my Login API ready in spring boot which worked with postman and I've got my login page ready in next js. All I need now is when I click login it should authenticate the user details and move me to another page otherwise show something like 'invalid username/password. So how do I go about this, my js knowledge is pretty mediocre.
I would suggest starting with using a library to manage API calls,
I recommend Axios https://github.com/axios/axios.
Or Next's own library, SWR https://swr.vercel.app.
For authentication, many strategies exist, from using a JWT token to using session cookies. try searching and finding the best strategy for your app or your needs.
After that, try reading the different methods of data fetching that Next.JS offers https://nextjs.org/docs/basic-features/data-fetching/overview, you will find that each method helps to solve a certain problem, and has its own pros and cons.
Good Luck!
Related
I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)
I am developing a React app that needs to be connected to a backend server so that the user can login using Google OAuth, and then once that access token is granted, they are able to see the rest of the app. However, I am having a difficult time understanding just how to connect the front-end app to the backend. If someone could enlighten me on this, using SpringBoot MVC and PostgreSQL, that would be great. Thanks!
You have several ways to communicate your FE(React) and your BE(SpringBoot MVC).
You can have REST endpoint on your Backend, and then try to communicate from your react application, you can use [axios][1], request or the native fetch.
Then you can just make calls to the BE, and try to read, update, delete or create information, you should read about CRUD.
The most common this days is build something like this:
(FE) <---> (BE) <---> (DB)
But I strongly recommend you to read more about:
- React SPA.
- REST, you can also read about SOAP or even GraphQL.
- CRUD.
You will found a lot of tutorials with very good examples of how to do it.
Hope this helps you to understand a little more what approach to use.
I would like to ask how to create an ionic app that talks to Laravel API but still works offline when there's no connection.
Let's say i have to write a quiz mobile app in Ionic and it requests for Laravel API to retrieve the questions as well as store the scores in db.
I'm just starting to learn Ionic and i'm really confused right now on how to approach this.
What confuses me most are:
Does the Ionic source live inside the Laravel source code w/c serves the API?
If i want the Ionic app to be installable, should the Laravel source code be included as well during the compilation process?
Thanks in advance for any help.
Your php or in general server side code is completely independent from your ionic application. If you want your app to work offline you should think about something like fetching a high number of information initially and work with this data without making any additional requests.
However your ionic app does only contain the frontend. You could implement some logic for local storage, but if you want to keep information hidden from the user (e.g. solutions) you have to put that logic on a dedicated server.
In the few details you provided, I can say the Laravel code does not live inside the ionic app. The ionic app is separate from the backend API by Laravel. You are possibly trying for a ReST based architecture where you communicate with your Laravel Server with an API. You need to keep those codes separate.
However without any internet, you won't be able to access those APIs, so you will just be able to show some static data, or you could serve from a DB and show later. For how to use the sqlite db you can look here
In your backend you can have an API like
http://example.com/api/v1/questions/1/
Which will fetch a question with options and if you want the app to have the answer for offline storage you may have that as well. When a user answers, you may check whether you have internet access and send answer and verify if you do, else you may save the answer in your DB and sync when you do have access. You can fetch multiple questions so that a user may answer multiple questions in case he/she will not have internet access.
Hope it helps. :)
I have a stateless header based authentication API endpoint. I would like to build my website that will be requesting data from it. Being a stateless authentication and given the fact that the server does not maintain any sessions, How would I go about implementing a Login Flow for the same. I am building an AngularJS SPA and would be using multiple routes in my application. What would be the best way to approach the authentication for a production level service. I came across AngularJS cookies, but it is not really that secure(I am concerned about a possible Cookie Hijack). What are my options here? Any help will be really appreciated as I am completely new to login flow.
I will be sending the headers over SSL for obvious reasons. But how prone am I to an attack by doing this? https://security.stackexchange.com/questions/988/is-basic-auth-secure-if-done-over-https There are weaknesses pointed out here, but how do I overcome these? Any help will be really appreciated.
PS: I understand that there are better ways to implement it currently by making modifications on the server side, but if I were considering this current scenario of how everything works(explained above) how would I go about with it?
I would suggest using JSON Web Tokens (https://en.wikipedia.org/wiki/JSON_Web_Token).... check out https://github.com/auth0/angular-jwt for a ready to use solution for Angular. You just need to setup the server side part.
I'm not posting any code here as I have a design problem. It may also be that I'm trying to do something that makes no sense - if so, let me know.
I have an Angular site that uses JWTs. At present I use Passport.js with a LocalStrategy. I would like to use Twitter login. I can't work out how to handle the communications.
The Passport docs envisage a situation where you go to a route on your server that redirects you to Twitter and Twitter calls back your server after it has finished, and then your server can respond to this second request (I think) with a new page and a cookie.
But I have Angular on the client side, and I can't find any tutorials for handling that. I think I could get Angular to open a window and connect to Twitter, and then I presume twitter could callback my server, but how then does my server find the Angular client to send the JWT?
I had a project that I needed to implement Facebook, Twitter and Local logins. With passport Facebook and Local were easy but with Twitter I just gave up and implemented it without passport.
I just used the Twitter API.
Very helpful was the documentation on Satellizer. It is an angular library for handle the login types in the front end, but it also have a very nice examples how to handle the logins in the different back end languages without using any third party libraries. I actually haven't used it, because I wrote all I needed myself without any third party libraries, but it helped me understand better different login APIs and how to handle them in the backend. You can check the examples here.
Hope this helps you.