Skip to content

Commit

Permalink
feat(module): Add a custom FirebaseApp name
Browse files Browse the repository at this point in the history
  • Loading branch information
davideast committed Dec 30, 2016
1 parent 8df96d1 commit 73a3e26
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 30 deletions.
18 changes: 17 additions & 1 deletion docs/1-install-and-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ You should see a message that says *App works!*
npm install angularfire2 firebase --save
```

Now that you have a new project setup, install AngularFire 2 and Firebase from npm.
Now that you have a new project setup, install AngularFire2 and Firebase from npm.

### 4. Setup @NgModule

Expand Down Expand Up @@ -86,6 +86,22 @@ export class AppModule {}

```

### Custom FirebaseApp Names
You can optionally provide a custom FirebaseApp name with `initializeApp`.

```ts
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig, authConfig, 'my-app-name')
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```


### 5. Inject AngularFire

Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
Expand Down
14 changes: 7 additions & 7 deletions docs/5-user-authentication.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ const myFirebaseConfig = {
databaseURL: '<your-database-URL>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-messaging-sender-id>'
}
};

const myFirebaseAuthConfig = {
provider: AuthProviders.Google,
method: AuthMethods.Redirect
}
};

@NgModule({
imports: [
Expand All @@ -46,7 +46,7 @@ export class AppModule {}
If you have setup authentication in bootstrap like above, then all you need to do
is call login on `af.auth.login()`

The long exception is if you're using username and password, then you'll have
The lone exception is if you're using username and password, then you'll have
to call `af.auth.login()` with the user's credentials.

```ts
Expand Down Expand Up @@ -102,7 +102,7 @@ authentication in the bootstrap phase, you can still override the configuration.
af.auth.login({
provider: AuthProviders.Anonymous,
method: AuthMethods.Anonymous,
})
});

// Email and password
af.auth.login({
Expand All @@ -112,19 +112,19 @@ af.auth.login({
{
provider: AuthProviders.Password,
method: AuthMethods.Password,
})
});

// Social provider redirect
af.auth.login({
provider: AuthProviders.Twitter,
method: AuthMethods.Redirect,
})
});

// Social provider popup
af.auth.login({
provider: AuthProviders.Github,
method: AuthMethods.Popup,
})
});
```

**Example app:**
Expand Down
18 changes: 11 additions & 7 deletions src/angularfire2.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,18 @@ import { Subscription } from 'rxjs/Subscription';
import { COMMON_CONFIG, ANON_AUTH_CONFIG } from './test-config';

describe('angularfire', () => {
var subscription:Subscription;
var app: firebase.app.App;
var rootRef: firebase.database.Reference;
var questionsRef: firebase.database.Reference;
var listOfQuestionsRef: firebase.database.Reference;
var angularFire2: AngularFire;
let subscription:Subscription;
let app: firebase.app.App;
let rootRef: firebase.database.Reference;
let questionsRef: firebase.database.Reference;
let listOfQuestionsRef: firebase.database.Reference;
let angularFire2: AngularFire;
const APP_NAME = 'super-awesome-test-firebase-app-name';

beforeEach(() => {

TestBed.configureTestingModule({
imports: [AngularFireModule.initializeApp(COMMON_CONFIG, ANON_AUTH_CONFIG)]
imports: [AngularFireModule.initializeApp(COMMON_CONFIG, ANON_AUTH_CONFIG, APP_NAME)]
});

inject([FirebaseApp, AngularFire], (firebaseApp: firebase.app.App, _af: AngularFire) => {
Expand Down Expand Up @@ -71,6 +72,9 @@ describe('angularfire', () => {
describe('FirebaseApp', () => {
it('should provide a FirebaseApp for the FirebaseApp binding', () => {
expect(typeof app.delete).toBe('function');
});
it('should have the provided name', () => {
expect(app.name).toBe(APP_NAME);
})
});

Expand Down
32 changes: 17 additions & 15 deletions src/angularfire2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
FirebaseApp,
WindowLocation,
FirebaseUserConfig,
FirebaseAuthConfig
FirebaseAuthConfig,
FirebaseAppName
} from './tokens';
import {
APP_INITIALIZER,
Expand Down Expand Up @@ -43,14 +44,14 @@ import {
@Injectable()
export class AngularFire {
constructor(
@Inject(FirebaseConfig) private firebaseConfig:string,
@Inject(FirebaseConfig) private firebaseConfig:FirebaseAppConfig,
public auth: AngularFireAuth,
public database: AngularFireDatabase) {}
}

export function _getFirebase(config: FirebaseAppConfig): firebase.app.App {
export function _getFirebase(config: FirebaseAppConfig, appName: string): firebase.app.App {
try {
return firebase.initializeApp(config);
return firebase.initializeApp(config, appName);
}
catch (e) {
return firebase.app(null);
Expand Down Expand Up @@ -79,7 +80,7 @@ export const COMMON_PROVIDERS: any[] = [
{
provide: FirebaseApp,
useFactory: _getFirebase,
deps: [FirebaseConfig]
deps: [FirebaseConfig, FirebaseAppName]
},
AngularFireAuth,
AngularFire,
Expand All @@ -106,23 +107,24 @@ export const FIREBASE_PROVIDERS:any[] = [
export const defaultFirebase = (config: FirebaseAppConfig): any => {
return [
{ provide: FirebaseUserConfig, useValue: config },
{ provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] }
{ provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] }
]
};

@NgModule({
providers: FIREBASE_PROVIDERS
providers: FIREBASE_PROVIDERS
})
export class AngularFireModule {
static initializeApp(config: FirebaseAppConfig, authConfig?:AuthConfiguration): ModuleWithProviders {
static initializeApp(config: FirebaseAppConfig, authConfig?: AuthConfiguration, appName?: string): ModuleWithProviders {
return {
ngModule: AngularFireModule,
providers: [
{ provide: FirebaseUserConfig, useValue: config },
{ provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
{ provide: FirebaseAuthConfig, useValue: authConfig }
]
}
ngModule: AngularFireModule,
providers: [
{ provide: FirebaseUserConfig, useValue: config },
{ provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
{ provide: FirebaseAuthConfig, useValue: authConfig },
{ provide: FirebaseAppName, useValue: appName }
]
}
}
}

Expand Down
1 change: 1 addition & 0 deletions src/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const FirebaseConfig = new OpaqueToken('FirebaseUrl');
export const FirebaseApp = new OpaqueToken('FirebaseApp')
export const FirebaseAuthConfig = new OpaqueToken('FirebaseAuthConfig');
export const FirebaseUserConfig = new OpaqueToken('FirebaseUserConfig');
export const FirebaseAppName = new OpaqueToken('FirebaseAppName');
export const WindowLocation = new OpaqueToken('WindowLocation');
// TODO: Deprecate
export const FirebaseRef = FirebaseApp;
Expand Down

0 comments on commit 73a3e26

Please sign in to comment.