Designing a social authentication for a DRF + React/Vuejs app(from scratch)
A few months ago, I’ve been asked to implement the social authentication for a web app, so I did what someone that has never done the task before would do, I googled it. After several hours of research, I haven’t found a clue on what I was going to do. I eventually implemented the social authentication using Django(this website for example), but never on DRF, the rest architecture was new to me.
After more hours of research I found out that there was an issue with the AllAuth package, which eventually caused me to give up on using any third-party package, it was my only hope.
I then found a video on YouTube, that video changed everything. The guy explained the thing in a very good way, all clear, I have now visibility for where I was heading, and I knew I was going to make it 'from scratch.
I followed what the guy did but eventually, he gave me just the backend part, I still had to figure out a way to actually run through the frontend also, because I had to. The user is going to have to click on the signup with google/Facebook buttons, those were eventually displayed on the frontend.
So after some more digging around, trial and error, I came up with this solution:
Here is an explanation of the flow:
1. Display a button in the frontend server telling the user to log in using a social provider(google or Facebook for example),
2. The user will be redirected to a screen(social auth provider websIte) telling them to actually log in and then grant access to some of their data(the auth provider will take care of this)
3. We will get a response with the data of the user + one or multiple tokens (depending on the auth provider),
See, now we can store the data on the client side or simply send the data to the backend and create a user.
4. But I chose to add a security layer, by verifying the token given with the actual google API. This verification will occur in the backend. After that, we will receive a response from the auth provider(Google/Facebook…) with the user data, create a user and generate their tokens (access and refresh). The Tokens will be used to access restricted views.
Why an additional security layer?
I chose to add an additional security layer because I didn’t want my endpoint to be tricked. For example, if somebody sends a simple POST request to the given endpoint(the endpoint that creates a social user), my system would be faked. Anyone then can create a social user, but without actually having to go through the social authentication flow.
The system I created simply ignores the data sent in the first place, grabs the necessary Token from the response provided by the auth provider, and uses a third-party API - which checks the token validity and returns back the user information. This way we’re sure that our user is actually a user provided by the auth provider.
If you're interested in creating the feature on your own, check this out and let me know how it turned out!