Connect.js

Connect.js makes it easy to manage authentication on your website with minimal programming

Including connect.js

<script type="text/javascript" src="https://www.dailycred.com/connect.js"></script>
<script>
var _dailycred_client_id="e7e98056-fe9c-4c0f-8121-94508490b485";
</script>

Add this script tag to your page to get started with DailyCred.

You must set your _dailycred_client_id to identify your website when communicating with DailyCred. You can get all your keys from your keys page

Set your callbacks

After authentication your users will be directed to one of three callback urls:

  • success_url: After the user has successfully authenticated, their browser will be sent to this url along with an access_token parameter that your application can use to retreive the customer's information.
  • fail_url: If the user cancels authentication their browser will be sent to this url along with a message parameter that you can display to the user.
  • home_url: After email verification, we will direct the user to your homepage. Set the appropriate url here.
  • set_pass_url: This is the url where a user sets a new password after forgetting their password. This is step two of the forgot password process, described below under Set password.

Set your callbacks in your application settings.

Sign-up

Add the class _dailycred_signup to an element to make it summon a sign-up modal.

<a href='#' class='_dailycred_signup'>Sign up</a>

View the demo.

Add this form with class _dailycred_signup to your html. You can style the form however you like.

<form class='_dailycred_signup'>
  <div class='_dailycred_alert' style='display:none'></div>
  <input type='text' name='login' placeholder='Email' autofocus>
  <input type='password' name='pass' placeholder='Password'>
<button class='_dailycred_submit' data-wait='Please Wait'>Sign In</button>
</form>

View the Bootstrap demo or a simple demo.

Call the function _dailycred_signup() to display the modal sign-up window.

_dailycred_signup();

View the demo.

You can also make this call using the API.

curl https://www.dailycred.com/user/api/signup.json 
-d 'client_id=dailycred' 
-d 'email=john@example.com' 
-d 'pass=password'

View the full API for more details.

Sign-in

Add the class _dailycred_signin to an element to make it summon a sign-in modal.

<a href='#' class='_dailycred_signin'>Sign in</a>

View the demo.

Add this form with class _dailycred_signin to your html. You can style the form however you like.

<form class='_dailycred_signin'>
	<div class='_dailycred_alert' style='display:none'></div>
<input type='text' name='login' placeholder='Login' autofocus>
<input type='password' name='pass' placeholder='Password'>
<button class='_dailycred_submit' data-wait='Please Wait'>Sign In</button>
</form>

View the Bootstrap demo or a simple demo.

Call the function _dailycred_signin() to display the modal sign-in window.

_dailycred_signin();

View the demo.

You can also make this call using the API.

curl https://www.dailycred.com/user/api/signin.json 
-d 'client_id=dailycred' 
-d 'email=john@example.com' 
-d 'pass=password'

View the full API for more details.

Social sign-in

Note: to use social sign-in you must first add the keys from your social apps to your DailyCred application's settings.

You can use the same _dailycred_signin class as for sign-in to summon a sign-in modal.

<a href='#' class='_dailycred_signin'>Sign in</a>

View the demo.

Add the class _dailycred_social and data-network='[network]' to any clickable element.

<a href='#' class='_dailycred_social' data-network='facebook'>Connect with Facebook</a>
<a href='#' class='_dailycred_social' data-network='google'>Connect with Google</a>

View the Bootstrap demo or a simple demo.

Call the function _dailycred_social('[network]'); to send the user into the OAuth flow.

_dailycred_social('facebook');

/connect/bootstrap/social

Forgot password

Note: this flow requires Set Password also be implemented.
This flow will send an email to the user with a link to your set_pass_url callback url along with a reset_id.

Add the class _dailycred_forgot to an element to make it summon a sign-in modal.

<a href='#' class='_dailycred_forgot'>I forgot my password</a>

View the demo.

Add this form with _dailycred_forgot to your html. You can style the form however you like.

<form class='_dailycred_forgot'>
<div class='_dailycred_alert' style='display:none'></div>
<input type='text' name='user' placeholder='Email'>
<button class='_dailycred_submit' data-wait='Please Wait'>Reset Password</button>
</form>

View the Bootstrap demo or a simple demo.

Call the function _dailycred_forgot() to display the modal forgot password window.

_dailycred_forgot();

View the demo.

Set password

This is the second step of the password reset process. The user will be sent an email with a link to this page, along with a reset_id

Add this form with _dailycred_set_password to your html. After the password has been set, Connect.js will call _dailycred_password_success_callback() which you should implement to alert the user.

<form class='_dailycred_set_password'>
<div class='_dailycred_alert' style='display:none'></div>
<input type='password' name='pass_new' placeholder='New Password'>
<button class='_dailycred_submit' data-wait='Please Wait'>Set Password</button>
</form>
<script>
function _dailycred_password_success_callback() {
alert('Your password has been set.');
}
</script>

View the Bootstrap demo or a simple demo.

Email-only (newsletter) sign-up

An email-only user can add a password later using the forgot-password flow.

Add the class _dailycred_newsletter to an element to make it summon a newsletter sign-up modal.

<a href='#' class='_dailycred_newsletter'>Sign up for our newsletter</a>

View the demo.

Add a form with _dailycred_newsletter to your html.
Implement _dailycred_newsletter_callback() to alert your user when their email has been added.

<form class='_dailycred_newsletter'>
<div class='_dailycred_alert' style='display:none'></div>
<input type='text' name='email' placeholder='Email' autofocus>
<button class='_dailycred_submit' data-wait='Please Wait'>Sign Up</button>
</form>
<script>
function _dailycred_newsletter_callback() {
alert('Your email has been added.');
}
</script>

View the Bootstrap demo or a simple demo.

Call the function _dailycred_newsletter() to summon the newsletter signup modal.

_dailycred_newsletter(this);

View the demo.

You can also make this call using the API.

curl /admin/api/email 
-d 'client_id=dailycred' 
-d 'email=john@example.com'

View the full API for more details.