Configuration

Add lincd passport to your project:

yarn add lincd-passport

lincd-passport depends on lincd-auth. So first follow the instructions of lincd-auth to set up the authentication module.

Environment variables

To use the Passport module, you need to set up the necessary environment variables and provide the required values.

First of all, set the following two variables to indicate which shapes should be used for the users (persons) and their accounts

• AUTH_ACCOUNT_TYPE
• AUTH_USER_TYPE

The values should be the import path to a shape, or a local relative path, for example:

"AUTH_ACCOUNT_TYPE": "lincd-dating/lib/shapes/FreeAccount",
"AUTH_USER_TYPE": "./src/shapes/Person",

The following sections describe the environment variables that need to be set up to enable different login strategies for passportjs.

Strategy configuration

• OAUTH_STRATEGY: Array of enabled authentication strategies. Possible values: google, facebook, magiclogin. To enable all, use: ["google", "facebook", "magiclogin"]

example:

"OAUTH_STRATEGY": ["magiclogin"],

Setup the authentication strategies

Make sure to set up the required environment variables for each chosen strategy:

Google

• GOOGLE_CLIENT_ID: Client ID for Google authentication.
• GOOGLE_CLIENT_SECRET: Client secret for Google authentication.

To obtain the client ID and client secret for Google authentication, you need to set up a project in the Google Developer Console. Refer to the Google Authentication documentation from Passport.js for detailed instructions on how to set up and obtain the required credentials.

Facebook

• FACEBOOK_CLIENT_ID: Client ID for Facebook authentication.
• FACEBOOK_CLIENT_SECRET: Client secret for Facebook authentication.

To obtain the client ID and client secret for Facebook authentication, you need to create an app on the Facebook Developers platform. Refer to the Facebook Authentication documentation from Passport.js for detailed instructions on how to set up and obtain the required credentials.

Magic Login & Zeptomail

• MAGIC_LOGIN_SECRET: Secret key for Magic Login authentication.
• MAGIC_LOGIN_DEV_CONSOLE_MODE: Set to true in order to skip the email sending and just print the magic link to the console. You will not have to set up zeptomail yet.
• MAGIC_LOGIN_DOMAINS: A whitelist of email domains allowed to sign in, represented by an array.
• MAGIC_LOGIN_EMAILS: A whitelist of complete email addresses allowed to sign in, represented by an array.
• MAGIC_LOGIN_TEST_EMAIL: Set an email that can log in directly without sending an email. Useful for testing.
• ZEPTOMAIL_TOKEN: Token for Zeptomail integration.
• ZEPTOMAIL_BOUNCE_ADDRESS: Bounce address for Zeptomail.
• ZEPTOMAIL_FROM_ADDRESS: Sender address for Zeptomail.
• ZEPTOMAIL_FROM_NAME: Sender name for Zeptomail.

For example:

    "MAGIC_LOGIN_SECRET": "typeinasecretkeyhere",
    "MAGIC_LOGIN_DOMAINS": ["website.org", "safe-site.com"],
    "MAGIC_LOGIN_EMAILS": ["john.smith@website.org", "foobar@safe-site.com"],
    "ZEPTOMAIL_TOKEN": "asdfasdfasdfasdf",
    "ZEPTOMAIL_BOUNCE_ADDRESS": "mail@bounce.yourdomain.org",
    "ZEPTOMAIL_FROM_ADDRESS": "noreply@yourdomain.org",
    "ZEPTOMAIL_FROM_NAME": "noreply"
    "MAGIC_LOGIN_TEST_EMAIL": "test@yourdomain.com"

For Magic Login and Zeptomail integration, make sure to obtain the necessary tokens and configure the email settings. Refer to the Magic Login and Zeptomail documentation for more information on how to set up and use these authentication methods.

For the MAGIC_LOGIN_DOMAINS and MAGIC_LOGIN_EMAILS whitelists, it's important to note the following;

• These variables are not mutually exclusive
• If both these variables are present, all domains found in MAGIC_LOGIN_EMAILS should also be present in MAGIC_LOGIN_DOMAINS, otherwise the sign-in will fail on the condition of the domain not being in the whitelist.

Also add the following to your routes:

import {createMagicLinkRoute} from 'lincd-passport/lib/utils/passportAuth';

magicLink: createMagicLinkRoute({path:'/'}, () => {
    return <DefaultLayout><Spinner /></DefaultLayout>
}),

and then you can use something like this:

import {
  facebookOAuthSignin,
  googleOAuthSignin,
  magicLinkOAuthSignin,
  snapchatOAuthSignin,
} from 'lincd-passport/lib/utils/passportAuth';

...

    await magicLinkOAuthSignin(email)
        .then((response) => {
          if (response) {
            snackbar.openSnackbar({
              message: "We've send you an email. Please check your email to sign in.",
              type: 'success',
              position: 'bottom-center',
              duration: 5000,
            });
          }
        })
        .catch((e) => {
          console.log('err', e);
        })
        .finally(() => {
          setLoadingEmail(false);
          setEmail('');
        });```