juliancwirko:s-id - Packosphere

s-id

Simple Accounts system for Meteor. Especially for Scotty boilerplate (work in progress).

This is a simple and custom Accounts system because we don't need any complicated logic and Bootstrap classes here..

Demo

(With minimal styling, but you can do this very simple by adding your own css classes)

s-id-demo.meteor.com

Website:

s-id.meteor.com

Usage

Just add the package:

meteor add juliancwirko:s-id

You can configure your routes for each view if you want. You can use Iron Router or Flow Router it is up to you because. Here you will get only templates and couple of config functions which will alow you to configure your login, register callbacks. Templates to use:

sIdLoginView
sIdRegisterView
sIdForgotPasswordView
sIdResetPasswordView

Full Config (all is optional and here you can overwrite defaults)

Place it somewhere where it will be accessible by Server and Client

1Meteor.startup(function () {
2    sId.config({
3        registerForm: {
4            mainClass: 's-id-register-form', // css class for main container - you can change it and style it like you want in your app
5            title: 'Register', // form title
6            leadText: 'Hi, join us!', // form description text
7            submitBtnLabel: 'Register' // button label text
8        },
9        loginForm: {
10            mainClass: 's-id-login-form',
11            title: 'Login',
12            leadText: 'Beam me up, Scotty!',
13            submitBtnLabel: 'Login'
14        },
15        forgotPassForm: {
16            mainClass: 's-id-forgot-password-form',
17            title: 'Forgot Password',
18            leadText: 'Please fill in email address!',
19            submitBtnLabel: 'Send New!'
20        },
21        resetPassForm: {
22            mainClass: 's-id-reset-password-form',
23            title: 'Reset Password',
24            leadText: 'Please fill in new password!',
25            submitBtnLabel: 'Set New!'
26        },
27        socialButtons: { // disable/enable social login/register buttons
28            'github': true,
29            'google': true,
30            'twitter': true,
31            'labels': { // labels for social buttons
32                'github': 'GitHub Access',
33                'google': 'Google Access',
34                'twitter': 'Twitter Access'
35            }
36        },
37        onLogged: function () {
38            // callback after successful login
39            // it could be for example Router.go('/') or FlowRouter.go('/dashboard') or any other
40        },
41        onRegistered: function () {
42            // callback after successful registration
43        },
44        onForgotPassword: function () {
45            // callback after successful on forgot password action
46        },
47        onResetPassword: function () {
48            // callback after successful password reset
49        },
50        getPasswordResetToken: function () {
51            // here you should return reset password tokent from your route param
52            // you should have configured route: '/reset-password/:resetToken',
53            // then with Iron Router you can do something like:
54            //
55            // return Router.current().params.resetToken;
56        }
57    });
58});

You can then use (somewhere in your templates):

1{{#if currentUser}}
2    <a href="#" class="js-logout">Logout</a></li>
3{{else}}
4    <a href="{{pathFor 'sIdLoginView'}}">Login</a>
5    <a href="{{pathFor 'sIdRegisterView'}}">Register</a>
6{{/if}}

Logout event by Meteor.logout(function () { console.log('logged out!') }) - see docs.meteor.com

Log the user in using an external service

You can log/sign in using an external service. For now it is GitHub, Google, Twitter

If you want to use social buttons (enabled by default) You have to setup your settings.json file : Meteor Docs

Example (settings.json in your app root folder):

{
    "github": {
        "clientId": "{your github API client id here}",
        "secret": "{your google API secret key here}"
    },
    "google": {
        "clientId": "{your google API client id here}",
        "secret": "{your google API secret key here}"
    },
    "twitter": {
        "consumerKey": "{your twitter API customer key here}",
        "secret": "{your twitter API secret key here}"
    }
}

You can generate your API keys on these sites:

Then you should run your app with: meteor --settings settings.json and you can also deploy it with: meteor deploy --settings settings.json your-app.meteor.com

You will find more in Meteor Docs.

Be carefull with Twitter - the email of logged in user isn't avaible

If you want to transform data in your user collection you can use Accounts.onCreateUser

Example:

1Accounts.onCreateUser(function (options, user) {
2    if (user.services.github) {
3
4        user.username = user.services.github.username;
5        user.emails = [];
6        user.emails.push({
7            address: user.services.github.email,
8            verified: true
9        });
10
11        return user;
12    }
13
14    if (user.services.google) {
15
16        user.username = user.services.google.email;
17        user.emails = [];
18        user.emails.push({
19            address: user.services.google.email,
20            verified: true
21        });
22
23        return user;
24    }
25
26    if (user.services.twitter) {
27        // your transforms
28    }
29
30    return user;
31});

Styling

There will be more customization in the future. For now you can use mainClass as a namespace for DOM elements which has its own ids and classes. As you can see if you provide your own css class in the config you will get simple unstyled template.

You can take the package style.css file as a reference.

It is also integrated with s-alert notifications

If you want you can play with excelent package for overwriting templates: aldeed:template-extension

Sending Emails

You can configure Mailgun with Meteor. It is very simple. If you will deploy on meteor.com there should be Mailgun configured.

Example:

1Meteor.startup(function () {
2    process.env.MAIL_URL = 'smtp://postmaster@{your-data}.mailgun.org:{your-data}@smtp.mailgun.org:587';
3});

Example routes which you can use in your app (Iron Router example)

Routes names are important here.

1Router.map(function() {
2    this.route('sIdLoginView', {
3        path: '/login',
4    });
5    this.route('sIdRegisterView', {
6        path: '/register'
7    });
8    this.route('sIdForgotPasswordView', {
9        path: '/forgot-password'
10    });
11    this.route('sIdResetPasswordView', {
12        path: '/reset-password/:resetToken'
13    });
14});

It should be simple to adjust it for FlowRouter and any other router for Meteor. Basicaly you just use ready to go templates from the package and some callbacks which you can configure.

Changelog

v1.0.1 fix onLogged() callback with external services like Google etc.
v1.0.0 is not depended on Iron Router anymore. You should use templates and make your own routes (example above). You can use onLogged, onRegistered, onForgotPassword, onResetPassword callbacks in config to make (for example) redirections.

TODO

sign up email confirmation
loginWithMeteorDeveloperAccount
loginWithFacebook
form validation with alerts