Ngx-admin: Auth with firebase

[lamquangphuc]

Can you help me using auth with firebase?

[nnixaa]

@phuclam85 we don't have any docs specifically on firebase, but you can start with the following suggestion https://github.com/akveo/nebular/issues/61#issuecomment-342178155.

[mathieu-neron]

I was able to do this by rewriting my own auth components based off the existing ones from nebular/auth. I got rid of the config and the default authProvider and simply used AngularFire2 instead. This also allowed me to get rid of the nebular AuthModule in the @core. After that you simply have to configure your routes to point to your new components. You can check this section to get you started: https://akveo.github.io/nebular/#/docs/auth/configuring-ui

Doc on AngularFire2 as well: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

[vispatel]

There's a pull request open in the nebular project. https://github.com/akveo/nebular/pull/90

[tanwarsatya]

@mathieu-neron do you have the source available for the same. Would like to leverage the same in our project.

[mathieu-neron]

@tanwarsatya don't have much to show that is that much different from what is already present in nebular: https://github.com/akveo/nebular/tree/9f122e1c2716169ff2901c624f5108c403bb6917/src/framework/auth. Like I said just take the auth components from there. We personally moved these components (auth-block, login, register, rquest-password, reset-password, etc.) under

src/app/@/theme/components/auth

with its own auth.routes.ts module and added everything in the themes.modules.ts. Here's a quick code example for the login component. You will have to do some cleanup, since you don't want to use these services if you go the AngularFire2 way:

export class YourOwnLoginComponent {

  redirectDelay: number = 0;
  showMessages: any = {};
  provider: string = '';

  errors: string[] = [];
  messages: string[] = [];
  user: any = {};
  submitted: boolean = false;

  constructor(// protected service: NbAuthService, No longer need
              // @Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {}, no longer needed
// Use something like private afAuth: AngularFireAuth instead
              protected router: Router) {
  }

  login(): void {
// AngularFire2 login here
  }
}

[tanwarsatya]

@mathieu-neron thanks a lot, i will follow the same path.

[avdwalt]

@mathieu-neron Hi bud, how did you direct the app to go from the app-routing.module to the auth login page in @/theme/components/auth?

[mathieu-neron]

@avdwalt same as with any other component, I simply created a path for each of my component+children. I also added an Authgard for any component where I wanted to protect access. Here's my routes constant for reference:

const routes: Routes = [
  { path: 'home', loadChildren: 'app/home/home.module#HomeModule', canActivate: [AuthGuard]},
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [AuthGuard, OrganizationGuard]},
  {
    path: 'auth',
    component: AuthComponent,
    children: [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'register',
        component: RegisterComponent
      },
      {
        path: 'request-password',
        component: RequestPasswordComponent
      },
      {
        path: 'reset-password',
        component: ResetPasswordComponent
      }
    ],
  },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'not-found', component: NotFoundComponent },
  { path: '**', redirectTo: 'not-found' }
];

I think I also defined and used an auth.routes.ts in my @/theme/component/auth folder, but the path are the same, so it might be redundant.

[AnthonyNahas]

@phuclam85 take a look at ngx-auth-firebaseui 👍 It's easy to use and built for angular v5. Here is a live demo

[GianlucaRi]

Hi,
I have integrated Firebase Auth in ngx-admin for my project and published just the auth part yesterday.
You can take a look here : https://github.com/GianlucaRi/ngx-admin.

If you want to do it on your own try to follow these steps :

• Install angularfire2 and firebase.
• Add firebase to app.module.ts
• Create your own auth provider that calls the firebase auth service.
• Copie the pages from akveo/@nebular/auth as explained by @nnixaa
• Remove the NbAuthService but KEEP the config injection. (@Inject(NB_AUTH_OPTIONS_TOKEN) config is important)
• Fix the rooting as described by @mathieu-neron

At this step login and register should work with email and password but not with the social link.
RequestPassword should be work completely. The ResetPassword won't work yet.

Then :

• Fix the social link : by editing your @core/core.module.ts and take a look here https://github.com/GianlucaRi/ngx-admin/blob/master/src/app/auth/login/login.component.html
• Go to firebase in the auth section you have a template option to change to make it point to the reset password page.
• Finally : extact the "code" in the link (parameter oobCode) from the url to secure the password change.

I hope this will help you.

Have a good day!

[ashutoshoneplus5t]

Hi,

Thank you for connecting and sharing your knowledge with me.I really
appreciate that.
I am looking for the integration of ngx-admin with asp.net web api project.
Can you please let me know the correct steps to integrate this theme with
web api project.

Thanks and Regards
Ashutosh Parashar

On Tue, Apr 10, 2018 at 7:39 PM, GianlucaRi [e-mail]
wrote:

Hi,
I have integrated Firebase Auth in ngx-admin for my project and published
just the auth part yesterday.
You can take a look here : https://github.com/GianlucaRi/ngx-admin.

If you want to do it on your own try to follow these steps :

• Install angularfire2 and firebase.
• Add firebase to app.module.ts
• Create your own auth provider that calls the firebase auth service.
• Copie the pages from akveo/ as explained by @nnixaa
  https://github.com/nnixaa
• Remove the NbAuthService but KEEP the config injection. (@Inject
  https://github.com/Inject(NB_AUTH_OPTIONS_TOKEN) config is important)
• Fix the rooting as described by @mathieu-neron
  https://github.com/mathieu-neron

At this step login and register should work with email and password but
not with the social link.
RequestPassword should be work completely. The ResetPassword won't work
yet.

Then :

• Fix the social link : by editing your .module.ts and take a look
  here https://github.com/GianlucaRi/ngx-admin/blob/master/src/app/
  auth/login/login.component.html
  https://github.com/GianlucaRi/ngx-admin/blob/master/src/app/auth/login/login.component.html
• Go to firebase in the auth section you have a template option to
  change to make it point to the reset password page.
• Finally : extact the "code" in the link (parameter oobCode) from the
  url to secure the password change.

I hope this will help you.

Have a good day!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/akveo/ngx-admin/issues/1352#issuecomment-380112050,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjnY2vzAIfIDiPjqg3sF5Z4wC7XrYwOTks5tnL0FgaJpZM4QN_Pv
.

[SanjeevKarki]

@GianlucaRi : Integrated in my project,Working well so far. Thanks for your efforts.
Couple of questions below
1) Need to use auth token to pass in rest API's.
2) Do i need to send an email while resetting the password.If Yes what is the difference between
Request and Reset password.

[GianlucaRi]

Hi @SanjeevKarki !

1. In your app module you have the firebase credential. That's all you need.
   It is not using the akveo code with auth token explained here in the nebular doc

1. Request password -> send an email (with a token) to allow the user to change the password. (So you need to send the email)
   Reset password : check the token and change the password in the firebase auth db.
   They are called on two different pages.

If you need more explanation feel free to ask me ;)

Have a good day,

Gianluca Ricciardelli
Founder of PromoteScreen

[SanjeevKarki]

Hi @GianlucaRi

Thanks for your response.
How do i get token which i need to check while resetting password.

Thanks
Sanjeev

[enviniom]

Hi @GianlucaRi, your explanation and code are good, but it is not working on last version of ngx-admin with angular 6, I am in troubles with the guard services, I even freezes the browser.

[AhsanNissar]

@GianlucaRi how were you able to access the getDeepFromObject from components? I am unable to access it and my code is giving me an error after compiling. This thread also opened just 7 days ago
bug.

[vazra]

@GianlucaRi how were you able to access the getDeepFromObject from components? I am unable to access it and my code is giving me an error after compiling. This thread also opened just 7 days ago
bug.

Yes there was a bug, its fixed in Ver. 4.1.1 , now you can import getDeepFromObject as

import { getDeepFromObject } from '@nebular/auth';

[SvenBudak]

Any news? is it now possible to use firebase with nebular auth?

[jotcodeofficial]

Any news? is it now possible to use firebase with nebular auth?

Seems it is being worked on and has a pull request here:
https://github.com/akveo/nebular/pull/2385

[jotcodeofficial]

So it seems it has been merged to master now on nebular:

https://github.com/akveo/nebular/pull/2385

https://github.com/akveo/nebular/pull/2403

So I am assuming until ngx-admin merges the latest changes to master that you can just update the version of nebular auth in your package.json to "@nebular/auth": "5.1.0" then npm update?
And perhaps the other nebular packages might need to be bumped up too.