Custom Login Register pages

In this post let´s see an alternative to the traditional loginButtons and build a custom login/register page.

 

Custom E-Mail Password form

The first thing to do when you want a login functionality in Meteor is add the accouts-password package.

[code language=”javascript”]

meteor add accounts-password

[/code]

Next create the .html and .js files. I don´t know how you organize your projects but in my case I’m using an directory structure like client>views>login.

I’ll now write the .html code here but you can check it out here

After you write your html like you want, you have to write the events. Let´s start writing the register event first.

[code language=”javascript”]

‘click .register-submit-button’: function(e){

e.preventDefault();

var name = $(‘.register-name’).val();

var email = $(‘.register-email’).val();

var password = $(‘.register-password’).val();

var passwordConfirmation = $(‘.register-password-confirmation’).val();

Accounts.createUser({email: email, password: password, profile: {name: name}}, function (err) {

if (err) {

alert(“Was not possible to register you.”);

} else {

FlowRouter.go(‘/’);

}

});

return false;

}

[/code]

The relevant information here is the Accounts.createUser that you use to create a new user on your app, simple like that.

The login event.

[code language=”javascript”]

‘click .login-submit-button’: function(e){

e.preventDefault();

var email = $(‘.login-email’).val();

var password = $(‘.login-password’).val();

Meteor.loginWithPassword(email, password, function(err) {

if (err) {

alert(“Invalid login”);

} else {

FlowRouter.go(‘/’);

return true;

}

});

return false;

}

[/code]

That’s it, you just wrote your custom login page.

Custom Login Buttons

More interesting than forms are the loginWith* Meteor capabilities, it’s incredible how easy it to connect people using their social network credentials. I’m a Java developer too and I had to do that using spring social and I can tell you, is not a easy job.

So, once again let´s start by including awesome packages to help us

[code language=”javascript”]

meteor add service-configuration

meteor add accounts-google

meteor add accounts-facebook

meteor add accounts-twitter

[/code]

And then, go to your social accounts and create your apps ( yes, you have to do that even if you are using just logginButtons directly )

https://console.developers.google.com

https://developers.facebook.com/apps

https://apps.twitter.com/app/new

Important: Don´t forget to fill the origin and callback urls when you create your apps.

After your journey, create an startup file on the server side of your app and fill it with your credentials.

[code language=”javascript”]

Meteor.startup(function () {

ServiceConfiguration.configurations.upsert(

{ service: “google” },

{

$set: {

clientId: “”,

loginStyle: “popup”,

secret: “”

}

}

);

ServiceConfiguration.configurations.upsert(

{ service: “facebook” },

{

$set: {

appId: “”,

loginStyle: “popup”,

secret: “”

}

}

);

ServiceConfiguration.configurations.upsert(

{ service: “twitter” },

{

$set: {

consumerKey: “”,

loginStyle: “popup”,

secret: “”

}

}

);

});

[/code]

Awesome, now our work is almost done, now just go back to your form and include buttons for each social network you want, eg.

[code language=”html”]

[/code]

And create the events for each one, eg:

[code language=”javascript”]

‘click .register-google-button’: function(){

Meteor.loginWithGoogle({}, function (err) {

if (err) {

alert(“We can’t register you right now, try again later.”);

}else{

FlowRouter.go(‘/’);

}

});

},

‘click .register-facebook-button’: function(){

Meteor.loginWithFacebook({}, function (err) {

if (err) {

alert(“We can’t register you right now, try again later.”);

}else{

FlowRouter.go(‘/’);

}

});

},

‘click .register-twitter-button’: function(){

Meteor.loginWithTwitter({}, function (err) {

if (err) {

alert(“We can’t register you right now, try again later.”);

}else{

FlowRouter.go(‘/’);

}

});

}

[/code]

And incredible you´ll use the same loginWith* to login and register users too, yes, it do the both, pretty nice isn’t?

 

Conclusion

Maybe you can’t reuse this code but I’m sure that now you have a great idea of how to do a nice custom login/register page and how easy it is comparing with some alternatives outside there  😉

Allan de Queiroz

Allan de Queiroz
London based software engineer

XServer forward from Linux text mode for Headless purposes.

Hello, this post is about XServer forward from Linux text mode, **not ssh forward, anything related to VNC** or things like that.Recently...… Continue reading