Calling a django api from react for sign in page - javascript

I have built a react application which has a login page. I am done with the frontend of login page using react. Now the other person from my team has build a backend api on django. I want to call that api from my react code now. How should I do it? Do I need to learn something specific? I have searched in internet and all of the sources we to make serve react and django from same project. I have a React project with me and a separate api developed by someone else. Please guide me through this. I am pretty new to this.

No, you dont have to learn something new. You need to just make an ajax call to the API endpoint from within your react application to fetch or send the data needed and handle the response.
Also keep in mind to setup the ajax to send the CSRF token as shown in the docs.

Related

Live database fetch using Laravel and React

I'm new to React and still learning Laravel, and I was wondering how can I live fetch data from the database using the Laravel Controllers. I want to use React too but I really don't see his utility there.
From my searches, I found an Ajax method, but I really want to use just Laravel and React to do so. Is it possible?
Like displaying the new users directly from the database without refreshing the whole page? I'm using Mysql to manage my database.
First of all, You need to set up laravel sanctum to get the authenticated data.
But if you don't want the authenticated data. You can just use a fetching library like axios to fetch data from the laravel. You need to add the cors (which is localhost:3000) in app.cors.php file of laravel root directory.
But if you are using reacjs with laravel like with intertia.js (which I prefere btw), You don't need the cors, laravel will work out of the box....

Laravel user authentication in react-native?

I'm working on my first react-native app, coming from vue-laravel background I was wondering if it's actually possible to use laravel normal auth for my react-native, so far it seems I can succesfully login a user sending their credentials via POST request to my API, however subsequent uses of Auth helper fail, that is I can't get the logged user using Auth::user(), it returns null...
Is this possible to accomplish? I have read about firebase auth but I don't feel like adding another database system to my laravel main Mysql database, truth is I don't know for sure what laravel uses for authentication under the hood so I can't get this to work.
Any help would be appreciated.
You can use tymon/jwt-auth for backend (laravel) and use the token in frontend(react native)

Laravel authentication in nativescript-vue app, anyone has done it?

I'm fairly new to nativescript-vue dev and I'd like to set authentication for my native app, I have been thinking about using firebase auth but I'd rather go the laravel route (if it's a good choice at all).
How I think I'd handle this is to send a post request to my backend (which is a laravel app) into my custom auth controller, then in the success callback I'd change isLogged in the vuex store to true or false, since I'm suing also vuex-persistedstate to persist some data into my localStorage (actually it's Application Settings in natviescript afaik).
Is my way of doing this okk? has anyone done it?
I was using a Laravel API before, but decided to switch back to Firebase, I think it’s a better choice for mobile.
But if you want to use Laravel, take a look at Laravel Passport (https://laravel.com/docs/6.x/passport).
You can use the Password Grant (https://laravel.com/docs/6.x/passport#password-grant-tokens) to generate a token from your mobile application, by creating a login endpoint that will generate the token for you.

How to implement a weather API in cordova

I have to create an android weather app with cordova using data from openweathermap.
The thing is I install cordova and I get to the "hello world", but I have no idea how to get data from openweather.
I create the project in cordova, then I can edit that hello world as it was a web page using html, and css.
But how do I make it to search for places and get data from openweathermap?
I have registered in openweathermap, got my own key, but don't know how to use it.
Don't even know what sohld I study to learn how to do it.
I think I should make a request to the openweather API, then openweather will reply with the weather data in json format, then I should get that data to my website/cordova app.
But how?
Thank you
Been looking for tutorials, but none I found explain what I want.
They use Ionic or react, stuff I don't know how to use.
I would like to keep it simple, just look for the city, and get the weather displayed, to know how it is done.
TL;DR - You are going to be making GET requests to the server
Ok so, what you're looking for is the ability to fetch the weather data from the API server and display it on your component template somehow. What you need is the HTTPClientModule that comes with angular (and therefore with Ionic if you are using Angular as your frontend framework, v4 works with Vue and React as well).
I know this is rough for a lot of new developers so I'll make it as simple as possible for you, import the HTTPClientModule inside your app module so you can use it globally. Then, the best practice is to place all API calls(which is how you'll fetch the weather data with your key) inside a service. Create a GET request to the URI endpoint associated with the data you require and voila, you have your data.
From there, go to your page's typescript file and import the service and declare it in the class constructor. From there, you can make a function that subscribes (since Angular ships with RxJS) to the service function that fetches your data and saves it to a variable.
If you want to pass that onto your component view, well I'm sure you have interpolation figured out. Don't forget to use the async pipe since you are fetching asynchronous data.

How to mix SSR with CSR?

I have a very little knowledge about SSR.
Currently, I have two servers. I have built a CSR Single Page App using React on one server and backend on Nodejs + express on another server. My app has a login page.
How can I move my existing Login component logic to SSR and after successfull login all other components must work from CSR. I don't know how to achieve this goal.
Do I need to turn my CSR react app server into SSR by using something like Nextjs and the backend nodejs server should continue to operate like before?
Or do I need to use SSR logic on my backend Nodejs server?
Or do I need to migrate my whole CSR react app into SSR? Then do i still need backend nodejs server?
I might sound confusing asking this question. Please let me know if i need to explain it a bit further.
You will use just one NodeJS + Express server. You define some regular endpoint routes to provide things like login functionality, signup and so on. But also a "catch-all" route at the end where you will render your react app to a string via node and send it back to the browser as HTML.
Not too long ago I did a very basic SSR example using typescript and react. I hope this will be helpful!
https://github.com/akimthedream/server-side-rendered-typescript-react

Categories

Resources