I am currently working on implementing the authorization code flow with Auth0 for our Spartacus application. The authentication works fine and I can navigate the page from the root. However when I try to access a deep link, e.g. /configure/vc/product/entityKey/key I get redirected to the Homepage. Same behaviour when I refresh the page.
I observed that the pages request gets canceled and instead the Router routes to "/". I don't see any Fail Actions being fired by ngrx.
Debugging the flow, I believe it has to do with the AuthService.checkOAuthParamsInUrl() method, which throws an exception in line
const result = await this.oAuthLibWrapperService.tryLogin(); (https://github.com/SAP/spartacus/blob/develop/projects/core/src/auth/user-auth/facade/auth.service.ts)
The method seems to check for the code inside the url, which is not available in deep links. I assumed it would take the token from the local storage if available.
Am I on the wrong track, or is the only possiblity to adjust the behaviour of the AuthService? If so, how should I go on with it?
Spartacus Version: 3.4.3.
rxjs Version: 6.6.7
[EDIT] My AuthConfig:
provideConfig(<AuthConfig>{
authentication: {
OAuthLibConfig: {
responseType: 'code',
redirectUri: environment.spartacus.auth.redirectUrl,
customQueryParams: {
connection: 'main-tenant-oidc',
audience: 'my-audience'
}
},
baseUrl: 'https://my-auth.auth0.com',
client_id: 'id',
client_secret: 'secret',
loginUrl: '/authorize',
tokenEndpoint: '/oauth/token',
userinfoEndpoint: '/userinfo',
revokeEndpoint: '/oauth/revoke'
}
})
[EDIT]
The AuthGuard confirms that the user is logged in, i.e. the isUserLoggedIn() function returns true.
[EDIT]
Updated to Spartacus 4 following the reference structure, no change of behaviour. I am configuring authentication via
routing: {protected: true}
My Feature Module looks like this, knowing that I definitly dont need all of the imports:
import {NgModule} from '#angular/core';
import {OrderConfirmationModule, ReplenishmentOrderConfirmationModule} from "#spartacus/checkout/components";
import {CheckoutOccModule} from "#spartacus/checkout/occ";
import {
AuthModule,
CartModule,
CartOccModule,
CostCenterOccModule,
ExternalRoutesModule,
ProductModule,
ProductOccModule,
UserOccModule
} from "#spartacus/core";
// TODO:Spartacus - 'ProductVariantsModule' was removed from #spartacus/storefront. Use #spartacus/product/variants feature-library instead. To benefit from lazy loading it by default, consider removing the module import and running the command 'ng add #spartacus/product --features=Product-Variants'.
// TODO:Spartacus - 'UserComponentModule' - Following module imports 'LoginModule', 'LoginFormModule', 'LoginRegisterModule', 'RegisterComponentModule' were removed. Those modules are now part of #spartacus/user.
import {
AddressBookModule,
BannerCarouselModule,
BannerModule,
BreadcrumbModule,
CartComponentModule,
CartPageEventModule,
CategoryNavigationModule,
CmsParagraphModule,
FooterNavigationModule,
HamburgerMenuModule,
LinkModule,
MyCouponsModule,
MyInterestsModule,
NavigationEventModule,
NavigationModule,
NotificationPreferenceModule,
OrderCancellationModule,
OrderDetailsModule,
OrderHistoryModule,
OrderReturnModule,
PaymentMethodsModule,
ProductCarouselModule,
ProductDetailsPageModule,
ProductFacetNavigationModule,
ProductImagesModule,
ProductIntroModule,
ProductListingPageModule,
ProductListModule,
ProductPageEventModule,
ProductReferencesModule,
ProductSummaryModule,
ProductTabsModule,
ReplenishmentOrderDetailsModule,
ReplenishmentOrderHistoryModule,
ReturnRequestDetailModule,
ReturnRequestListModule,
SearchBoxModule,
SiteContextSelectorModule,
StockNotificationModule,
TabParagraphContainerModule,
WishListModule
} from "#spartacus/storefront";
import {
CloseAccountModule,
ForgotPasswordModule,
RegisterComponentModule,
ResetPasswordModule,
UpdateEmailModule,
UpdatePasswordModule,
UpdateProfileModule
} from "#spartacus/user/profile/components";
import {ProductVariantsFeatureModule} from './features/product/product-variants-feature.module';
import {LoginFormModule, LoginModule, LoginRegisterModule} from "#spartacus/user/account/components";
import { UserFeatureModule } from './features/user/user-feature.module';
#NgModule({
declarations: [],
imports: [
// Migrating the StorefrontModule
ProductDetailsPageModule,
ProductListingPageModule,
ExternalRoutesModule.forRoot(),
// Migrating the CmsLibModule
HamburgerMenuModule,
CmsParagraphModule,
LinkModule,
BannerModule,
CategoryNavigationModule,
NavigationModule,
FooterNavigationModule,
BreadcrumbModule,
SearchBoxModule,
SiteContextSelectorModule,
AddressBookModule,
OrderHistoryModule,
OrderCancellationModule,
OrderReturnModule,
ReturnRequestListModule,
ReturnRequestDetailModule,
ProductListModule,
ProductFacetNavigationModule,
ProductTabsModule,
ProductCarouselModule,
ProductReferencesModule,
OrderDetailsModule,
PaymentMethodsModule,
CartComponentModule,
TabParagraphContainerModule,
OrderConfirmationModule,
ProductImagesModule,
ProductSummaryModule,
ProductIntroModule,
BannerCarouselModule,
MyCouponsModule,
WishListModule,
NotificationPreferenceModule,
MyInterestsModule,
StockNotificationModule,
ReplenishmentOrderHistoryModule,
ReplenishmentOrderConfirmationModule,
ReplenishmentOrderDetailsModule,
CloseAccountModule,
UpdateEmailModule,
UpdatePasswordModule,
UpdateProfileModule,
ForgotPasswordModule,
ResetPasswordModule,
// Migrating the StorefrontFoundationModule
AuthModule.forRoot(),
CartModule.forRoot(),
ProductModule.forRoot(),
// Migrating the OccModule
CartOccModule,
CheckoutOccModule,
ProductOccModule,
UserOccModule,
CostCenterOccModule,
// Migrating the EventsModule
CartPageEventModule,
NavigationEventModule,
ProductPageEventModule,
ProductVariantsFeatureModule,
// UserComponentModule Substitution
LoginModule,
LoginFormModule,
LoginRegisterModule,
RegisterComponentModule,
UserFeatureModule
]
})
export class SpartacusFeaturesModule {
}
[EDIT]
Important to notice: Our tokens are not being validated by SAP Commerce Backend. So it may be an issue with the error responses, that differ from the native error responses.
Thanks for any hints :)
The throw from this method is not unusual and is handled with the try-catch. This confirms even that if this throws we don't invoke this.authRedirectService.redirect(); method.
In my opinion the depth of the url should not make any difference to Auth handling. I would look either into other guards that could cause some redirect or into this code specific to this configurator routes.
I have a react native app where I want to push user to instagram app without specifying any text content nor images for them. I just need them to type on the sharing page. What should I do? Thanks.
I'm using a third-party module for this react-native-send-intent to share via phone.
for this I write a helper function using this module:
import SendIntentAndroid from 'react-native-send-intent';
export function shareIntent({subject, title, body}) {
return SendIntentAndroid.openChooserWithOptions(
{
subject: subject,
text: body,
},
title,
);
}
I'm trying to use the google maps API at my vue2 project and I have tried some ways that have failed. After using the vue2googlemaps module and the node module from google I have decided to use the CDN directly and add it to the index page. My problem now is that to acced to the google object, for example, to create a Marker or something like that, I need to use this.marker = new window.google.maps.Marker() for example, but in the tutorials I have seen, everyone uses directly the google object and never uses that window. I can`t understand why it happens. It would be appreciated if someone shows me the correct way to import or use this library on google.
It's because your template's code is compiled and executed in your component instance (a.k.a vm) 's scope, not in the global (a.k.a. window) scope.
To use google directly in your template you could add the following computed:
computed: {
google: () => window.google
}
If your problem is not having google defined in the component's <script>, a simple solution is to add it as a const at the top:
import Vue from 'vue';
const google = window.google;
export default Vue.extend({
computed: {
google: () => google // also make it available in template, as `google`
}
})
An even more elegant solution is to teach webpack to get google from the window object whenever it's imported in any of your components:
vue.config.js:
module.exports = {
configureWebpack: {
externals: {
google: 'window.google'
}
}
}
This creates a google namespace in your webpack configuration so you can import from it in any of your components:
import google from 'google';
//...
computed: {
google: () => google // provide it to template, as `google`
}
Why do I say it's more elegant?
Because it decouples the component from the context and now you don't need to modify the component when used in different contexts (i.e: in a testing environment, which might not even use a browser, so it might not have a window object, but a global instead; all you'd have to do in this case is to define a google namespace in that environment and that's where your component will get its google object from; but you wouldn't have to tweak or mock any of the component's methods/properties).
I set the aurelia-store up as per the docs; in the main.ts at the bottom of all the plugins (from the skeleton app with dotnet core) I have as the last plugin defined:
aurelia.use.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-store'), { initialState })
Then my app needs to login the user and save their bearer token.
await aurelia.start();
await aurelia.setRoot(PLATFORM.moduleName("modules/login/login.vm"));
In the login class I am trying to use the #connectTo decorator. However it never sets the dependency property. So I am stuck on this simple part at the very start of the app and my work already suggested not to use Aurelia but I said I wanted to for fast POC.
I've copied the docs exactly and still have the issue. Notably, I had to turn off strictNullCheck in the tsconfig to make the doc code parse.
Login.ts
#connectTo({
target: 'state',
selector: {
userToken: (store) => store.state.pipe(pluck('userToken')),
loginRedirected: (store) => store.state.pipe(pluck('loginRedirected'))
}
})
export class Login {
static inject = [Aurelia, Store]
public state: State;
app: Aurelia;
constructor(Aurelia, private store: Store<State>) {
this.app = Aurelia
store.registerAction('ChangeUserToken', this.changeUserToken)
store.registerAction('LoginRedirected', this.loginRedirect)
}
activate() {
... this.state is always undefined.
if (!this.state.loginRedirected) { //error
}
}
}
I expect the this.state property to have a state object populated from the global state store with the initialState values.
e.g.
{ userToken: "", loginRedirected: false }
I just need to set the userToken in login and retrieve it in app.js. This is not possible; what could be missing to make this basic function actually work?
ConnectTo is a helper decorator to avoid manual state subscriptions since the Stream of states is a vanilla rxjs observable. If you take a closer look at the official plugin documentation you will notice that it sets up the subscription in a different lifecycle hook.
That said connectTo cant solve everything and with manual subscription you have the most flexibility.
Dont give up with your quest you just had bad luck of falling into a more complicated scenario of startup timing right at the begin which easy enough might bite you with lots of other Frameworks/Libraries as well. Also make sure to visit the official discourse.aurelia.io forum and post back solutions to SO.
I am using the "new" spotify apps api and their documentation about the default tabs only seem to be relevant if you are using the old 0.X api.
I can create the tabs with my manifest using the below code. But I can't seem to fin a way to interact with them.
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I found a example of interacting with the default tabs that looks like this:
sp = getSpotifyApi(1);
// detects arguments value for tab
sp.core.addEventListener("argumentsChanged", function (event) {
console.log('args changed', sp.core.getArguments());
});
But I keep getting the error message "Uncaught ReferenceError: getSpotifyApi is not defined " and according to this post Cannot use the "getSpotifyApi" function in spotify app it's due to the fact that it's the 0.X way of interacting with the api.
Cannot use the "getSpotifyApi" function in spotify app
The only thing close to it that i found where the 1.X tab bars, they dont resemble a classic spotify tab bar, more like regulair gray buttons.
https://developer.spotify.com/docs/apps/views/1.0/tabbar-tabbar.html
anyone have any ideas here?
Looks like your tabbar docs point to the proper usage documented on https://developer.spotify.com/docs/apps/views/1.0/ui-ui.html. I think UI.setActiveView should do what you want.
Alternatively, you should be able to navigate using uri's like spotify:app:appname:tabname
disclaimer I haven't built any tabs into my app yet.