Ionic4 Angular AuthGuard works for home page and not for sign in page
up vote
0
down vote
favorite
I have created an Authguard for my web app and have assigned into several routes like Home, Sign-in, Sign-up etc.
Expected Behavior:
- Home page - the intention is to show the login page if the user is not logged in
- Signin , Signup, Forgot Password etc - the intention is to redirect the user to the home page if he has already logged in (to avoid displaying the Sign-in page to a logged in user, if the user types the url in the address bar)
Actual Behavior:
If a user who has not logged in visits the home page, he is being redirected to Sign in page, but the page is not displayed.
If a user visits the Sign-in page by URL, again the page is not displayed. [ No matter if the user is logged in or not]
If I remove the auth guard for the Sign-in page, Loading the home page redirects the user to Sign in page and the page is displayed properly.
My AuthGuard code
@Injectable()
export class AuthGuard implements CanActivate boolean
return this.afAuth.authState.pipe(
take(1),
map(user => !!user),
tap(loggedIn =>
const url = route.url.toString();
if (url === ROUTE_SIGNIN )
);
EDIT:
Routes:
const routes: Routes = [
path: '',
redirectTo: ROUTE_HOME,
pathMatch: 'full'
,
path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] ,
path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard] ,
path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
, canActivate: [AuthGuard] ,
path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
, canActivate: [AuthGuard] ,
];
I can understand that the problem here is with assigning the Authguard to the login page. But I couldn't identify what is causing the problem. Can any of you point me in the right direction?
angular ionic-framework routing angular-router-guards auth-guard
asked Nov 11 at 5:52
Aravind
185
add a comment |
up vote
0
down vote
favorite
I have created an Authguard for my web app and have assigned into several routes like Home, Sign-in, Sign-up etc.
Expected Behavior:
- Home page - the intention is to show the login page if the user is not logged in
- Signin , Signup, Forgot Password etc - the intention is to redirect the user to the home page if he has already logged in (to avoid displaying the Sign-in page to a logged in user, if the user types the url in the address bar)
Actual Behavior:
If a user who has not logged in visits the home page, he is being redirected to Sign in page, but the page is not displayed.
If a user visits the Sign-in page by URL, again the page is not displayed. [ No matter if the user is logged in or not]
If I remove the auth guard for the Sign-in page, Loading the home page redirects the user to Sign in page and the page is displayed properly.
My AuthGuard code
@Injectable()
export class AuthGuard implements CanActivate boolean
return this.afAuth.authState.pipe(
take(1),
map(user => !!user),
tap(loggedIn =>
const url = route.url.toString();
if (url === ROUTE_SIGNIN )
);
EDIT:
Routes:
const routes: Routes = [
path: '',
redirectTo: ROUTE_HOME,
pathMatch: 'full'
,
path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] ,
path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard] ,
path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
, canActivate: [AuthGuard] ,
path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
, canActivate: [AuthGuard] ,
];
I can understand that the problem here is with assigning the Authguard to the login page. But I couldn't identify what is causing the problem. Can any of you point me in the right direction?
angular ionic-framework routing angular-router-guards auth-guard
asked Nov 11 at 5:52
Aravind
185
instead of returningreturn of(false)orreturn of(true)just returntrueorfalse
– Suryan
Nov 11 at 6:25
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,AuthenticatedGuard- any route attached will require user to be authenticated andUnauthenticatedGuard- any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complexifs etc.
– muradm
Nov 11 at 7:05
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
did you try to put your authentication inside theapp.component.tsfile and inside the platform ready function?
– nyx97
Nov 12 at 0:54
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have created an Authguard for my web app and have assigned into several routes like Home, Sign-in, Sign-up etc.
Expected Behavior:
- Home page - the intention is to show the login page if the user is not logged in
- Signin , Signup, Forgot Password etc - the intention is to redirect the user to the home page if he has already logged in (to avoid displaying the Sign-in page to a logged in user, if the user types the url in the address bar)
Actual Behavior:
If a user who has not logged in visits the home page, he is being redirected to Sign in page, but the page is not displayed.
If a user visits the Sign-in page by URL, again the page is not displayed. [ No matter if the user is logged in or not]
If I remove the auth guard for the Sign-in page, Loading the home page redirects the user to Sign in page and the page is displayed properly.
My AuthGuard code
@Injectable()
export class AuthGuard implements CanActivate boolean
return this.afAuth.authState.pipe(
take(1),
map(user => !!user),
tap(loggedIn =>
const url = route.url.toString();
if (url === ROUTE_SIGNIN )
);
EDIT:
Routes:
const routes: Routes = [
path: '',
redirectTo: ROUTE_HOME,
pathMatch: 'full'
,
path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] ,
path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard] ,
path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
, canActivate: [AuthGuard] ,
path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
, canActivate: [AuthGuard] ,
];
I can understand that the problem here is with assigning the Authguard to the login page. But I couldn't identify what is causing the problem. Can any of you point me in the right direction?
angular ionic-framework routing angular-router-guards auth-guard
asked Nov 11 at 5:52
Aravind
185
I have created an Authguard for my web app and have assigned into several routes like Home, Sign-in, Sign-up etc.
Expected Behavior:
- Home page - the intention is to show the login page if the user is not logged in
- Signin , Signup, Forgot Password etc - the intention is to redirect the user to the home page if he has already logged in (to avoid displaying the Sign-in page to a logged in user, if the user types the url in the address bar)
Actual Behavior:
If a user who has not logged in visits the home page, he is being redirected to Sign in page, but the page is not displayed.
If a user visits the Sign-in page by URL, again the page is not displayed. [ No matter if the user is logged in or not]
If I remove the auth guard for the Sign-in page, Loading the home page redirects the user to Sign in page and the page is displayed properly.
My AuthGuard code
@Injectable()
export class AuthGuard implements CanActivate boolean
return this.afAuth.authState.pipe(
take(1),
map(user => !!user),
tap(loggedIn =>
const url = route.url.toString();
if (url === ROUTE_SIGNIN )
);
EDIT:
Routes:
const routes: Routes = [
path: '',
redirectTo: ROUTE_HOME,
pathMatch: 'full'
,
path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] ,
path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] ,
path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard] ,
path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
, canActivate: [AuthGuard] ,
path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
, canActivate: [AuthGuard] ,
];
I can understand that the problem here is with assigning the Authguard to the login page. But I couldn't identify what is causing the problem. Can any of you point me in the right direction?
angular ionic-framework routing angular-router-guards auth-guard
angular ionic-framework routing angular-router-guards auth-guard
asked Nov 11 at 5:52
Aravind
185
asked Nov 11 at 5:52
Aravind
185
edited Nov 11 at 8:06
asked Nov 11 at 5:52
Aravind
185
asked Nov 11 at 5:52
Aravind
185
asked Nov 11 at 5:52
Aravind
185
185
instead of returningreturn of(false)orreturn of(true)just returntrueorfalse
– Suryan
Nov 11 at 6:25
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,AuthenticatedGuard- any route attached will require user to be authenticated andUnauthenticatedGuard- any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complexifs etc.
– muradm
Nov 11 at 7:05
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
did you try to put your authentication inside theapp.component.tsfile and inside the platform ready function?
– nyx97
Nov 12 at 0:54
add a comment |
instead of returningreturn of(false)orreturn of(true)just returntrueorfalse
– Suryan
Nov 11 at 6:25
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,AuthenticatedGuard- any route attached will require user to be authenticated andUnauthenticatedGuard- any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complexifs etc.
– muradm
Nov 11 at 7:05
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
did you try to put your authentication inside theapp.component.tsfile and inside the platform ready function?
– nyx97
Nov 12 at 0:54
instead of returning
return of(false) or return of(true) just return true or false– Suryan
Nov 11 at 6:25
instead of returning
return of(false) or return of(true) just return true or false– Suryan
Nov 11 at 6:25
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,
AuthenticatedGuard - any route attached will require user to be authenticated and UnauthenticatedGuard - any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complex ifs etc.– muradm
Nov 11 at 7:05
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,
AuthenticatedGuard - any route attached will require user to be authenticated and UnauthenticatedGuard - any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complex ifs etc.– muradm
Nov 11 at 7:05
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
did you try to put your authentication inside the
app.component.ts file and inside the platform ready function?– nyx97
Nov 12 at 0:54
did you try to put your authentication inside the
app.component.ts file and inside the platform ready function?– nyx97
Nov 12 at 0:54
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246211%2fionic4-angular-authguard-works-for-home-page-and-not-for-sign-in-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
instead of returning
return of(false)orreturn of(true)just returntrueorfalse– Suryan
Nov 11 at 6:25
tried that already. didn't work either
– Aravind
Nov 11 at 6:30
Show your routes as well. In your place, to reduce complexity, I would make 2 guards,
AuthenticatedGuard- any route attached will require user to be authenticated andUnauthenticatedGuard- any route attached will require user to be un-authenticated. This way it easier to manage, no need to do this complexifs etc.– muradm
Nov 11 at 7:05
@muradm I have edited the question and added the routes. I also tried adding a separate UnAuthGuard which would just check the loggedin status and redirect it to home if it was true. But it did not make any difference. I'm not sure what I'm missing in that simple piece of code.
– Aravind
Nov 11 at 8:07
did you try to put your authentication inside the
app.component.tsfile and inside the platform ready function?– nyx97
Nov 12 at 0:54