Howto create multiple instances of a browser in Protactor and still use Page Objects

I am trying to create multiple browser logins during my end-to-end tests with Protactor. Unfortunately I can't seem to find out howto setup a second browser and still use page objects.

credentials.js:

var credentials = {
    user1: {
        username: 'my@myselfandi.org',
        password: 'boomchickiwawa',
        userId: 1
    },
    user2: {
        username: 'you@yourselfandyou.org',
        password: 'boomchickiwawa',
        userId: 2
    }
};

module.exports = credentials;

login.page.js:

var LoginPage = function () {
    this.url = 'https://my-site/#/login';

    this.el = {
        user: element(by.model('data.username')),
        pass: element(by.model('data.password')),
        submit: element(by.css('button[type="submit"]')),
        error: element(by.css('.error')),
        popup: element(by.css('.popup-container.popup-showing.active'))
    };

    this.open = function() {
        browser.get(this.url);
    };

    this.currentUrl = function() {
        return browser.getCurrentUrl();
    };

    this.doLogin = function(username, password) {
        this.el.user.clear();
        this.el.pass.clear();
        this.el.user.sendKeys(username);
        this.el.pass.sendKeys(password);
        this.el.submit.click();
    };
};

module.exports = LoginPage;

contact.page.js:

var ContactPage = function () {
    this.url = 'https://my-site/#/app/tab/contact';

    this.open = function() {
        browser.get(this.url);
    };

    this.currentUrl = function() {
        return browser.getCurrentUrl();
    };
};

module.exports = ContactPage;

login.spec.js:

var credentials = require('./config/credentials.js');
var LoginPage = require('./pages/login.page.js');
var ContactPage = require('./pages/contact.page.js');

describe('[E2E] Login', function() {
    var loginPage = new LoginPage();
    var contactPage = new ContactPage();

    it('should redirect to login page if trying to view a contact page as anonymous user', function() {
        contactPage.open();
        expect(loginPage.currentUrl()).toBe(loginPage.url);
    });

    it('should show an error when login is incorrect', function() {
        loginPage.doLogin('wronguser@wrongmail.nl', 'wrongpass');
        expect(loginPage.el.error.isPresent()).toBe(true);
        expect(loginPage.el.popup.isPresent()).toBe(true);
    });

    it('should close the NOT AUTHORIZED popup', function() {
        loginPage.el.popup.all(by.css('.button')).click();
        expect(loginPage.el.popup.isPresent()).toBe(false);
    });

    it('should be able to log in', function() {
        loginPage.doLogin(credentials.user1.username, credentials.user1.password);

        expect(loginPage.el.error.isPresent()).toBe(false);
        expect(loginPage.el.popup.isPresent()).toBe(false);
        expect(loginPage.currentUrl()).toBe(contactPage.url);
    });

    it('should be able to create a 2nd login', function() {
        /*
         Normally I would setup a second browser like so:
         var browser2 = browser.forkNewDriverInstance(true);
        */
    });

});

All test now pass, but how do I create a second browser with respect to the page objects? I tried to pass the browser instance to the page objects, but that is failing.