If I have a route path with a hash, when I navigate to it, the hash is dropped from the URL and the page redirects to default path.
Ex:
http://localhost:4200/secure-headless/abc#/sample/wizard redirects to http://localhost:4200/#/sample/wizard
Is there a way to allow hash in the route using pathLocationStrategy?
Angular 2: Allow hash in route path
replace "start": "ng serve --base-href=/secure-headless/abc" under "scripts" in package.json. (refer screenshot) https://i.stack.imgur.com/MbT3N.png
In root modules, define "{ provide: LocationStrategy, useClass: HashLocationStrategy }" under providers. (refer screenshot) https://i.stack.imgur.com/KiQXV.png
Related
I have a two basic next apps that uses next-auth for its authentication along with keycloak provider.
i've been trying to use the feature of SSO (single sign on) that keyckoak provides, so i have a website running on http://localhost:3000/ and another one on http://localhost:3001/, and everytime i try to login using the second app, it redirects me to localhost 3000, not localhost 3001, which is a weird behavior, let me show you some code.
api/auth/[...nextauth].ts
(note: i'm using same realm and clientId for both apps)
import NextAuth from "next-auth/next";
import KeycloackProvider from "next-auth/providers/keycloak";
export default NextAuth({
debug: true,
providers: [
KeycloackProvider({
clientId: "react-client-1",
clientSecret: "react-auth",
issuer: "http://localhost:8080/realms/react-auth",
enter image description here }),
],
});
Function to sign in
here, the callbackUrl just doesn't work, no matter what i put there, it's just not going to redirect me to that url
const handleKeycloackSignIn = (): void => {
signIn("keycloak", {
callbackUrl: "http://localhost:3001/",
});
};
next-auth cookies for redirecting on localhost:3001
photo #1
Keycloack config
photo #2
What could be the reason for always redirecting to localhost:3000 ? is it some next-auth config that i'm missing or, maybe is related to keycloak ?
How can i redirect to wherever i want after a successful login/logout
I've tried hardcore google search around this topic, nothing really related to my specific issue.
You need to add some variables that next-auth need to your .env file, something like this.
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET=PRUEBA
this provides the url to redirect and a secret to your jwt token
Due to the structure of my Storyblok Space, I'm unable to rewrite the final slugs to match my desired URL structure.
Inside Storyblok, I have to use the folder level translation and due to business rules, inside the language folders, I have to group stories inside "virtual folders".
The structure inside my root folder and the desired final paths are:
en/website/home - en/home
en/website/about - en/about
en/website/category/business - en/category/business
en/landing-page/example-lp - en/example-lp
es/website/home - es/home
es/website/sobre - es/sobre
In this cases, website and langing-page are "virtual folders".
Using NextJS SSG, I am able to use getStaticPaths and getStaticProps with the Storyblok API and generate the pages with the full slug. This is achieved with a [[...slug]].js file inside my pages folder.
If I work with only one virtual path, for example website/, I can just return the getStaticPaths params as follows:
[{
params: { slug: ['about'] }, // without the 'website' value
locale: 'en',
}]
Just appending the virtual folder on the API request, inside getStaticProps, generates the files according to the desired path.
let { data } = await Storyblok.get(`cdn/stories/${params.locale}/website/${params.slug}`, option)
The drawback of this approach is that I must use only one virtual folder. I could not create structure where I could send dynamically the virtual folder parameter separately so it could be appended on the Storyblok request URL.
What I tried so far:
I was able to use the rewrites key inside my next.config.js to dynamically hide the vitrual folders. However, it does not affect my server side generated files.
Use Storyblok Advanced paths app to return the real_path of the stories on the cdn/links/ request. And even though I can setup the correct values to the real_path parameter, without the virtual folder reference I cannot request the stories correctly inside getStaticProps.
I wasn't able to modify the slug values of the responses from the Storyblok API.
I wasn't able to return an additional parameter to the getStaticPaths method. For example:
[{
params: { slug: ['about'], folder: ['website'] },
locale: 'en',
}]
Or even:
[{
params: { slug: ['about'] },
locale: 'en',
folder: 'website'
}]
Obs: The object above kinda works if I change my project's folder structure to pages/[folder]/[...slug].js. However, even though I can access the folder parameter inside getStaticProps, it also goes to the final paths
Any suggestion, or different approaches to solve it is very welcome.
Is there a way to integrate an Expo app with firebase dynamic links without detaching.
If you need to create new dynamic links on the fly you could use REST API to do it. In the much more likely scenario that you only need your app to open Firebase's dynamic links, you don't need to do anything other than configuring your Expo App to handle universal links (ie: deeplinks using http/https).
The checklist is something like this:
1. Configure your app.json
For Android, add the intentFilters property to your android property:
"android": {
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": "<your-domain>",
"pathPrefix": "/"
},
],
"category": [
"BROWSABLE",
"DEFAULT"
],
"autoVerify": true // required to work on newer android versions
}
]
]
For iOS, add the associatedDomains property to ios:
"ios": {
"associatedDomains": ["applinks:<your-domain>"]
}
2. Configure your domain to allow links from it to be handled by the apps
Android and iOS will allow your app to open links from your domain if you serve a configuration file from a specific location:
Android: https://<your-domain>/.well-known/assetlinks.json
iOS: https://<your-domain>/.well-known/apple-app-site-association
assetlinks.json will look something like this:
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "<android-package-name>",
"sha256_cert_fingerprints":
["<your-sha256-certificate-fingerprints>"]
}
}]
And the apple-app-site-association like this:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "<your-team-id>.<ios-bundle-identifier>",
"paths": [ "*" ]
}
]
}
}
You can read more about these files here and here.
To obtain the SHA256 fingerprints of your app’s signing certificate you can use the keytool:
keytool -list -v -keystore <your-key-file>
After you enter your keystore password, it will print many of the keystore information including the SHA256 fingerprints.
If your site is hosted on Firebase both assetlinks.json and apple-app-site-association can be generated automatically if you create the Apps on your Firebase's project. Otherwise, just put these files on the root of your domain.
3. Create a Firebase dynamic link
I think this is step is mostly self explanatory but just a few notes:
Set up your short URL link: in the end you will have / that you send to your users
Set up your Dynamic Link: here you define your deelink (the link you want your app to handle)
Define link behavior for iOS: you mostly likely want to click on 'Open the deep link in your iOS App' and select your App from the list (if you haven't yet, create one App for each platform on your project)
Define link behavior for Android: same as previous but with a few more options to select
Configure (or not) campaign tracking and you're done.
Remember that you always should test your deeplinks by clicking instead of by entering directly on the browser. You may send the link to yourself on the WhatsApp or put on some notes app, for example.
Others resources that might be helpful:
https://docs.expo.io/versions/latest/workflow/linking/
https://reactnavigation.org/docs/deep-linking/
In addition to Pedro Andrade's instructions:
1.) Firebase requires the following details under your app > project settings for dynamic links to work.
Android: SHA 256 (App signing key certificate fingerprint) - this can be retrieved via play store > your app > App Integrity > SHA 256
iOS: App ID Prefix (Team ID): developer.apple.com > Certificates, Identifiers & Profiles > your app id > App ID Prefix
Surprisingly, these are mentioned almost nowhere in the docs, but do come up in stackoverflow results and other answers when googling errors that debugging preview links result in:
Android app '<bundle id>' lacks SHA256. AppLinks is not enabled for the app. Learn more.
iOS app '<bundle id>' lacks App ID Prefix. UniversalLinks is not enabled for the app. Learn more.
You can view debugging preview links by adding ?d=1 to your dynamic links.
https://firebase.google.com/docs/dynamic-links/debug
2.) Even if you use a page.link-style domain provided by firebase for your dynamic links, your associatedDomain/intentFilter domains in app.json should still be your actual domain
i.e if you're generating my-app.page.link shortLinks, that are dynamic links to my-app.com, you should use my-app.com in app.json
Pedro Andrade's solution works! Partially...
Explaining:
You must NOT add your dynamic link domain in intentFilters and associatedDomains, because it makes the app to open the link directly in the app, so, the dynamic link is not processed and you don't have access to the link generated by the dynamic link.
It works partially because of this: the dynamic link needs to be opened by the browser (chrome or safari) before being opened in the app.
Example: Open "<your-domain>.page.link/XLSj" in browser, browser will direct to generated link: "<your-domain>.com/params/54" to configured deep link.
I don't know any other way to 'read' the dynamic link by expo in managed workflow.
We are working adding Auth0 to our Next.js website and referencing this example.
What I am wondering about is the settings in next.config.js in the example. It puts the Auth0 and other secrets in the client (via Webpack). Doesn't this put these secrets at risk? Since they are somewhere in the client code, there is a chance that a request can be made to access the secrets.
Examples in this Auth0 article also puts the secrets in the client.
I haven't had much luck finding out how Webpack handles the variables and am looking to the community to shed some light on this. We are trying to ensure our pattern is safe before putting it in to place.
From example, secrets being added to client side next.config.js:
const dotenv = require('dotenv')
dotenv.config()
module.exports = {
env: {
AUTH0_DOMAIN: process.env.AUTH0_DOMAIN,
AUTH0_CLIENT_ID: process.env.AUTH0_CLIENT_ID,
AUTH0_CLIENT_SECRET: process.env.AUTH0_CLIENT_SECRET,
AUTH0_SCOPE: 'openid profile',
REDIRECT_URI:
process.env.REDIRECT_URI || 'http://localhost:3000/api/callback',
POST_LOGOUT_REDIRECT_URI:
process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000/',
SESSION_COOKIE_SECRET: process.env.SESSION_COOKIE_SECRET,
SESSION_COOKIE_LIFETIME: 7200, // 2 hours
},
}
Update - Next v9.4:
Since Next.js v9.4, it exposes only env variables with the prefix NEXT_PUBLIC_ to the browser.
For more info, read this
Original answer:
DON'T put any secret env variables in a place that is accessible to the client.
I'm not sure what next does with this env property, It just configures a webpack DefinePlugin that replaces usages of process.env.VAR to it's value.
So, this means that your secrets will be inside bundles that are public.
To confirm that it is exposed in the client,
open dev-tools
open console by
pressing esc
click on the search tab
enter your secret key
It will find it in one of the bundles.
I am trying to use the NelmioApiDocBundle for a Symfony 3.4 projects API documentation, while also trying to wrap my head around OAuth 2 authorization for the project API access to begin with.
So far I've followed this tutorial on how to get FOSOAuthServerBundle working. So far I can
1.) create a client using the command line command:
php bin/console fos:oauth-server:create-client --redirect-uri="___" --grant-type="authorization_code" --grant-type="password" --grant-type="refresh_token" --grant-type="token" --grant-type="client_credentials"
2.) I can also get an access token manually by visiting this url on my server
http://127.0.0.1:8000/oauth/v2/token?client_id=______&client_secret=________&grant_type=client_credentials
3.) I can use the token to access areas of my Symfony project requiring OAuth Access by including the token in a GET parameter
However, in the NelmioApiDocBundle Authorizations I cannot get this to work to completion. Here is a screenshot:
If enter my client_id and secret key it takes me to the Login Page, as expected. I can enter my login information and in takes me to the Approve or Deny Page, as expected. At this point if I click either Approve or Deny it tries to use a "redirect_uri" of http://localhost:3200/oauth2-redirect.html. No matter what I do I cannot change the redirect URI.
How to I get the a proper redirect URI?
Ok, this was actually easily fixed. You need to add a single line:
oauth2RedirectUrl: 'URLhere',
to the file init-swagger-ui.js which is located (Symfony 3.4) in web/bundles/nelmioapidoc/
The final file ended up looking like this:
window.onload = () => {
const data = JSON.parse(document.getElementById('swagger-data').innerText);
const ui = SwaggerUIBundle({
oauth2RedirectUrl: 'URLhere',
spec: data.spec,
dom_id: '#swagger-ui',
validatorUrl: null,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: 'StandaloneLayout'
});
window.ui = ui;
};
Also you likely are going to want to download the file oauth2-redirect.html from the Swagger project to include for the actual redirect.