How to create Meteor OAuth Login Buttons similar to those in Accounts-UI?

Question

Currently I use the Meteor-Accounts-UI-Bootstrap-3-Blaze package in my navigation bar, which is pretty much the Accounts-UI package with bootstrap over it.

I want to have a separate sign up form for the splash screen, instead of just having it in the navigation bar (similar to what Facebook and Twitter do on their splash screens).

Is there any simple way to take essentially what is in the Accounts-UI package dropdown and display it on the splash screen?

OR

Is there any simple way to make a quick OAuth login button for the splash screen?

Thanks

Answer 1

If you wanted to make a custom button with id googleLoginButton for the Google OAuth login flow for example you would do

Template.myTemplate.events({
  'click #googleLoginButton': function() {
    Meteor.loginWithGoogle();
  }
});

if you want to add scopes

Meteor.loginWithGoogle({ requestPermissions: ['email', 'profile'] });

Note: you will still need to do the initial configuration where you add the clientId and clientSecret.

What I do is have a helper to check if the service is configured and if not display {{> loginButtons}}

Template.myTemplate.helpers({
  google_configured: function() {
    return ServiceConfiguration.configurations.findOne({service: 'google'});
  }
});

You could use that ServiceConfiguration collection to query all OAuth services you have configured and make custom login buttons for them all