Auth with firebase - Githubissues

lamquangphuc commented 6 years ago

Can you help me using auth with firebase?

nnixaa commented 6 years ago

@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 commented 6 years ago

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

vishco commented 6 years ago

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

tanwarsatya commented 6 years ago

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

mathieu-neron commented 6 years ago

@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 commented 6 years ago

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

avdwalt commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

GianlucaRi commented 6 years ago

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 commented 6 years ago

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 notifications@github.com 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 commented 6 years ago

@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 commented 6 years ago

Hi @SanjeevKarki !

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
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 commented 6 years ago

Hi @GianlucaRi

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

Thanks Sanjeev

enviniom commented 6 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 4 years ago

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

jotcodeofficial commented 4 years ago

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 commented 4 years ago

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.

akveo / ngx-admin

Auth with firebase #1352