![Utopian_wolf (1).png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515452801/byksyqjcysxfdz99hsao.png)

Hello everybody,

While the new year started semi-good, with me fighting-off a little weakness in my body - called *flue* (which at least went over pretty fast) - I still was very busy, developing the Social Login for the Utopian Registration.

The goal for the Utopian Registration is, to allow People who are new to STEEM to create an Utopian ( STEEM ) - Account through Utopian itself (and not how it is currently handled, through STEEMIT).

And one of the most important groundworks for this, is the actual login with a Github, Facebook or LinkedIn account.

In this Contribution-Post I'll take you through the changes I've made and what is working.

*I will also make another Contibution-Post for the backend - where the main part of the logic happened.*

<h1>The Pull-Request</h1>

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515443645/amlqyhkjqcl8gjxa3wzt.png)

I won't go over the code in detail, but you can check it out here: <a href="https://github.com/utopian-io/utopian-registration-frontend/commit/d9716aa723beb26be36a2eab8f279395605ac1e7">Pull Request</a>

<h1>The Social Login</h1>

<h2>Step 1: Choose Social-Login</h2>

![1 - Main.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515443916/bmwvpo0z573snjcjupoq.png)

You have prob. already noticed it but the Login-Button for LinkedIn is not shown. The reason for this is, that I had some problems with the API - and according to stackoverflow and google - am I not the only one and I rather focus on finishing the Project before I go too deep into a specific problem.

But this shouldn't be any big problem right now - since the most important Login is GitHub and after that for me personally FB.

And in this case - we'll click onto the *Github* Button.

<h2>Step 2: Authorize Utopian-App</h2>

Which then opens up a new window - where you need to enter your Github credentials and afterwards you will be shown this window.

![3 - github authorize.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515444044/tur0gpoxq0zyunpryy9w.png)

*(You can ignore the text about high number of requests)*

Which means - that these are the permission the user gives Utopian to scan and rate the account. The rating is important  because we have to see if the user has already verified through a social account - for example with a 2FA on Github or Facebook - because if he has not, a verification via phone (sms) is required.

I've also added a simple algorithm which checks these attributes and a few more to rate the account, but the goal is to let it evolve over time. But more on that in the backend-contribution post.

<h2>Step 3: Redirect User</h2>

Last but not least - after a click on *Authorize* the User will be redirected to a specific Page which is determined by the following question:

- Has the User already verified email & phone or email & social account? Then he will go straight to the Account-Creation.
- Otherwise the user will be redirected to the specific page where he / she lacks the verification.

In this case - the user gets redirected to the email verification - which is actually the next thing I'll be working on.

![4 - email verif.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515444049/lrx5rd4px7p1bxz4a8kg.png)

---


Now - while this looks pretty simple - there is a lot going on in the background. 

A User is created in the database, the profile of the user is getting retrieved from Github or Facebook and then rated and returned back to the frontend.

While the signup is already live under https://signup.utopian.io - the current version won't be there until the backend has been updated since this won't work otherwise and the backend code has been created in the official utopian-api backend.

---

<h1>Personal Message</h1>

I found the process of developing the social login quite challenging, because - while I already developed a steemconnect login for @smartsteem - I have never developed a login with facebook, github or linkedin.

However that is also where the fun part lies - since there is always an even greater joy when you do things which are difficult.

So I'm very glad that I had the chance to get my hands on that.

<h1>What's next</h1>

Next up for me is the email verification and SMS verification. While those are both things that I also haven't done before - I'm happy for the challenge.

Oh and of course - the backend Contribution-Post will also be created.

So - until then,

-Wolf


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@therealwolf/utopian-registration-frontend-social-login-with-github-facebook-and-linkedin">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>