Auth

import { VendureConfig, NativeAuthenticationStrategy } from '@vendure/core';import { FacebookAuthenticationStrategy } from './plugins/authentication/facebook-authentication-strategy';import { GoogleAuthenticationStrategy } from './plugins/authentication/google-authentication-strategy';import { KeycloakAuthenticationStrategy } from './plugins/authentication/keycloak-authentication-strategy';export const config: VendureConfig = {  authOptions: {      shopAuthenticationStrategy: [        new NativeAuthenticationStrategy(),        new FacebookAuthenticationStrategy(),        new GoogleAuthenticationStrategy(),      ],      adminAuthenticationStrategy: [        new NativeAuthenticationStrategy(),        new KeycloakAuthenticationStrategy(),      ],  }}

function onSignIn(googleUser) {  graphQlQuery(    `mutation Authenticate($token: String!) {        authenticate(input: {          google: { token: $token }        }) {        ...on CurrentUser {            id            identifier        }      }    }`,    { token: googleUser.getAuthResponse().id_token }  ).then(() => {    // redirect to account page  });}

import {    AuthenticationStrategy,    ExternalAuthenticationService,    Injector,    RequestContext,    User,} from '@vendure/core';import { OAuth2Client } from 'google-auth-library';import { DocumentNode } from 'graphql';import gql from 'graphql-tag';export type GoogleAuthData = {    token: string;};export class GoogleAuthenticationStrategy implements AuthenticationStrategy<GoogleAuthData> {    readonly name = 'google';    private client: OAuth2Client;    private externalAuthenticationService: ExternalAuthenticationService;    constructor(private clientId: string) {        // The clientId is obtained by creating a new OAuth client ID as described        // in the Google guide linked above.        this.client = new OAuth2Client(clientId);    }    init(injector: Injector) {        // The ExternalAuthenticationService is a helper service which encapsulates much        // of the common functionality related to dealing with external authentication        // providers.        this.externalAuthenticationService = injector.get(ExternalAuthenticationService);    }    defineInputType(): DocumentNode {        // Here we define the expected input object expected by the `authenticate` mutation        // under the "google" key.        return gql`        input GoogleAuthInput {            token: String!        }    `;    }    async authenticate(ctx: RequestContext, data: GoogleAuthData): Promise<User | false> {        // Here is the logic that uses the token provided by the storefront and uses it        // to find the user data from Google.        const ticket = await this.client.verifyIdToken({            idToken: data.token,            audience: this.clientId,        });        const payload = ticket.getPayload();        if (!payload || !payload.email) {            return false;        }        // First we check to see if this user has already authenticated in our        // Vendure server using this Google account. If so, we return that        // User object, and they will be now authenticated in Vendure.        const user = await this.externalAuthenticationService.findCustomerUser(ctx, this.name, payload.sub);        if (user) {            return user;        }        // If no user was found, we need to create a new User and Customer based        // on the details provided by Google. The ExternalAuthenticationService        // provides a convenience method which encapsulates all of this into        // a single method call.        return this.externalAuthenticationService.createCustomerAndUser(ctx, {            strategy: this.name,            externalIdentifier: payload.sub,            verified: payload.email_verified || false,            emailAddress: payload.email,            firstName: payload.given_name,            lastName: payload.family_name,        });    }}

/** * Renders a Facebook login button. */export const FBLoginButton = () => {    const fnName = `onFbLoginButtonSuccess`;    const router = useRouter();    const [error, setError] = useState('');    const [socialLoginMutation] = useMutation(AuthenticateDocument);    useEffect(() => {        (window as any)[fnName] = function() {            FB.getLoginStatus(login);        };        return () => {            delete (window as any)[fnName];        };    }, []);    useEffect(() => {        window?.FB?.XFBML.parse();    }, []);    const login = async (response: any) => {        const {status, authResponse} = response;        if (status === 'connected') {            const result = await socialLoginMutation({variables: {token: authResponse.accessToken}});            if (result.data?.authenticate.__typename === 'CurrentUser') {                // The user has logged in, refresh the browser                trackLogin('facebook');                router.reload();                return;            }        }        setError('An error occurred!');    };    return (        <div className="text-center" style={{ width: 188, height: 28 }}>            <FacebookSDK />            <div                className="fb-login-button"                data-width=""                data-size="medium"                data-button-type="login_with"                data-layout="default"                data-auto-logout-link="false"                data-use-continue-as="false"                data-scope="public_profile,email"                data-onlogin={`${fnName}();`}            />            {error && <div className="text-sm text-red-500">{error}</div>}        </div>  );};

import {    AuthenticationStrategy,    ExternalAuthenticationService,    Injector,    Logger,    RequestContext,    User,    UserService,} from '@vendure/core';import { DocumentNode } from 'graphql';import gql from 'graphql-tag';import fetch from 'node-fetch';export type FacebookAuthData = {    token: string;};export type FacebookAuthConfig = {    appId: string;    appSecret: string;    clientToken: string;};export class FacebookAuthenticationStrategy implements AuthenticationStrategy<FacebookAuthData> {    readonly name = 'facebook';    private externalAuthenticationService: ExternalAuthenticationService;    private userService: UserService;    constructor(private config: FacebookAuthConfig) {    }    init(injector: Injector) {        // The ExternalAuthenticationService is a helper service which encapsulates much        // of the common functionality related to dealing with external authentication        // providers.        this.externalAuthenticationService = injector.get(ExternalAuthenticationService);        this.userService = injector.get(UserService);    }    defineInputType(): DocumentNode {        // Here we define the expected input object expected by the `authenticate` mutation        // under the "google" key.        return gql`      input FacebookAuthInput {        token: String!      }    `;    }    private async getAppAccessToken() {        const resp = await fetch(            `https://graph.facebook.com/oauth/access_token?client_id=${this.config.appId}&client_secret=${this.config.appSecret}&grant_type=client_credentials`,        );        return await resp.json();    }    async authenticate(ctx: RequestContext, data: FacebookAuthData): Promise<User | false> {        const {token} = data;        const {access_token} = await this.getAppAccessToken();        const resp = await fetch(            `https://graph.facebook.com/debug_token?input_token=${token}&access_token=${access_token}`,        );        const result = await resp.json();        if (!result.data) {            return false;        }        const uresp = await fetch(`https://graph.facebook.com/me?access_token=${token}&fields=email,first_name,last_name`);        const uresult = (await uresp.json()) as { id?: string; email: string; first_name: string; last_name: string };        if (!uresult.id) {            return false;        }        const existingUser = await this.externalAuthenticationService.findCustomerUser(ctx, this.name, uresult.id);        if (existingUser) {            // This will select all the auth methods            return (await this.userService.getUserById(ctx, existingUser.id))!;        }        Logger.info(`User Create: ${JSON.stringify(uresult)}`);        const user = await this.externalAuthenticationService.createCustomerAndUser(ctx, {            strategy: this.name,            externalIdentifier: uresult.id,            // NOTE: Facebook generally returns a verified email, but this is not guaranteed for            // every account type. Only pass `verified: true` if you are confident the email is            // provider-verified — otherwise this login could be linked to a pre-existing account            // with the same email. See the security warning above.            verified: true,            emailAddress: uresult.email,            firstName: uresult.first_name,            lastName: uresult.last_name,        });        user.verified = true;        return user;    }}

const vendureLoginButton = document.querySelector('#vendure-login-button');vendureLoginButton.addEventListener('click', () => {  return graphQlQuery(`    mutation Authenticate($token: String!) {      authenticate(input: {        keycloak: {          token: $token        }      }) {        ...on CurrentUser { id }      }    }`,    { token: keycloak.token },  )  .then((result) => {      if (result.data?.authenticate.user) {          // successfully authenticated - redirect to Vendure Admin UI          window.location.replace('http://localhost:3000/admin');      }  });});

import { VendureConfig } from '@vendure/core';import { AdminUiPlugin } from '@vendure/admin-ui-plugin';export const config: VendureConfig = {    // ...    plugins: [        AdminUiPlugin.init({            port: 5001,            adminUiConfig: {                loginUrl: 'http://intranet/login',            },        }),    ],};

npm install node-fetch

import fetch from 'node-fetch';import {    AuthenticationStrategy,    ExternalAuthenticationService,    Injector,    Logger,    RequestContext,    RoleService,    User,} from '@vendure/core';import { DocumentNode } from 'graphql';import gql from 'graphql-tag';export type KeycloakAuthData = {    token: string;};export class KeycloakAuthenticationStrategy implements AuthenticationStrategy<KeycloakAuthData> {    readonly name = 'keycloak';    private externalAuthenticationService: ExternalAuthenticationService;    private httpService: HttpService;    private roleService: RoleService;    init(injector: Injector) {        this.externalAuthenticationService = injector.get(ExternalAuthenticationService);        this.httpService = injector.get(HttpService);        this.roleService = injector.get(RoleService);    }    defineInputType(): DocumentNode {        return gql`      input KeycloakAuthInput {        token: String!      }    `;    }    async authenticate(ctx: RequestContext, data: KeycloakAuthData): Promise<User | false> {        const { data: userInfo } = await fetch(            'http://localhost:9000/auth/realms/myrealm/protocol/openid-connect/userinfo', {                headers: {                    Authorization: `Bearer ${data.token}`,                },            }).then(res => res.json());        if (!userInfo) {            return false;        }        const user = await this.externalAuthenticationService.findAdministratorUser(ctx, this.name, userInfo.sub);        if (user) {            return user;        }        // When creating an Administrator, we need to know what Role(s) to assign.        // In this example, we've created a "merchant" role and assign that to all        // new Administrators. In a real implementation, you can have more complex        // logic to map an external user to a given role.        const roles = await this.roleService.findAll();        const merchantRole = roles.items.find((r) => r.code === 'merchant');        if (!merchantRole) {            Logger.error(`Could not find "merchant" role`);            return false;        }        return this.externalAuthenticationService.createAdministratorAndUser(ctx, {            strategy: this.name,            externalIdentifier: userInfo.sub,            identifier: userInfo.preferred_username,            emailAddress: userInfo.email,            firstName: userInfo.given_name,            lastName: userInfo.family_name,            roles: [merchantRole],        });    }}