hello friends,
Ahm. Sorry if this is a newbie question.
I am using React(create-react-app) outside phoenix app. I manage to connect them and create some basic CRUD using axios… But now i want to add some authentication and securing my API. But don’t know how i move forward. I see alot of tutorials about this but they are using redux. Can anyone give me some hints? Thank you.
The idea is to protect the api on the backend, by requesting a token for secured api routes. This can be done on the backend with guardian, or any homemade solution.Usually, some plugs and some token helpers. You will add a protected api pipeline, in your router.ex
pipeline :api_auth do
plug YourProjectNameWeb.Plug.VerifyHeader, realm: "Bearer"
end
and in the controller
plug YourProjectNameWeb.Plug.EnsureAuthenticated when action in [:refresh, :delete]
Once You get the backend protected, You need to get the frontend working with it.
The idea is on succesful signin/signup, You will receive a token from the server, store it wherever You want… usually localstorage. And delete it on signout.
Some people (like me) use a state manager to store authenticated status. That is why You see examples with redux a lot…
If You have a valid token, remember that a token is usually time limited, You will use it with axios to pass it back to the server. To do so, You need to add headers including the token.
const auth_headers = () => ({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${AuthService.loadToken()}`,
},
credentials: 'same-origin',
});
And now, You can pass this header to axios, the backend will decode it, check if it is not expired, and grant You access to protected api.
This is by far not a full example, but those are the steps I use to protect my apis.
Guardian use jwt token by default, but You can use Phoenix.Token instead.
1 Like
Just curious… what abour protect the api for non authenticate users content? I’ve seen some apis that works well on the browser (non-auth) but when you do a plain request it don’t work
1 Like
Do You mean restrict access to non authentified user only?
I made a plug EnsureNotAuthenticated, similar from guardian’s plugs.
Or do You mean You want to send non json message?
1 Like
Yes, that’s all i want to do, to protect the api to non authenticated users. thank you all, i will study this
(I’m sorry if my explanation is not clear, I’m not English native ^^’)
For example lets suppose that Wikipedia is a SPA client and calls an API to get the data, so you can go to any Wikipedia page with your browser and get the info without been authenticated, the SPA always call the server API url and get the info back, but if you call that api URL directly with the browser (or curl etc…) the API don’t return any data (Is like token cookies for unauthenticated clients or something like that…)
Sorry for the delay.
I am also not an english native speaker 
That would be funny if we speak the same language, but continue to write in broken english.
For your question, I am afraid I don’t have enough element/knowledge to tell, but if You have access to SPA code, I would have a look at how the requests are made, in particular the header, and type.
If I had no access, then I would use a sniffer, and check the output directly with it, but that would be some work.
Although wireshark makes network inspection quite easy. There is tcpdump in the Linux world to do the same.
I would start the sniffer, use the spa and introspect network traffic, I wish You good luck for the debug
1 Like
You should not be able to intercept anything if the connection is secured by HTTPS / TLS Encryption… You should perform a MAM with fake certificates which these days is harder than other times.
